Shutter wrap button bottomnavigationbar learning summary 4

Wrap

Wrap It is a component of flow layout , take children The components in the component list are arranged in rows , When a line can't fit , Wrap The rest of the components will flow to the next line for layout , Such as

You can see , If you can't fit a line , Wrap The rest will be automatically placed on the next line for layout
How alignment This can be done as the last component in a row , You can also start with the component , It can also be automatically , In the figure, the method of automatic adjustment is used

RaisedButton

Button components , Can pass RaisedButton Generate button , Click the button to listen for click events onPressed
When the button is clicked , This listener function will be called ,

You can also set data in the click to listen function , however , Button needs to be in StatefulWidget Can only be used in stateful components setState Function to update component data

You can see , stay this.lists When the data content changes , stay StatefulWidget Medium Listview The displayed content page will refresh , This is it. StatefulWidget Functions of stateful components

bottomNavigationBar

stay Scaffold Bottom navigation buttons can be set in , You can set the bottom navigation button to jump to the page , Button settings

    bottomNavigationBar: BottomNavigationBar(
            type: BottomNavigationBarType.fixed, // When the bottom navigation button exceeds 3 When it's time 
            //  There will be bug, The bottom navigation will be covered with white , Can pass type  Set it up , So it can be displayed normally 
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home), title: Text(" home page ")), //  There is... At the bottom 3 More than buttons 
              // when   There will be bug,
              BottomNavigationBarItem(
                  icon: Icon(Icons.wallpaper), title: Text(" classification ")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.settings), title: Text(" Set up ")),
              BottomNavigationBarItem(
                  icon: Icon(Icons.my_location), title: Text(" my ")),
            ]),
      ),

items Is an array of button components ,

You can see , When the number of buttons exceeds 3 When it's time , The bottom button will be covered with white , therefore , And that's where it comes in type The attribute is ,

type: BottomNavigationBarType.fixed

When you set type Properties can be displayed normally
One of the bottom buttons onTap function , When you click the bottom button, it will trigger the letter , This function takes in a int Parameters of type , This parameter receives items The subscript of the button corresponding to the button list , There is also a button at the bottom currentIndex Properties of , Used to select the corresponding subscript ,

First record a subscript in the button class , The default is 0, When you click onTap When , Get the subscript of the click button , And then in setState Function to replace the subscript of the record button , In this way, you can click the button to switch functions

Switch the display page by clicking the button at the bottom

This is very simple , on top import To other users' files , Then use a list to store these pages , Click on the bottom button num When things change ,body It will also change with life