15. Série de composants de boutons du chemin d'apprentissage Flutter

FlutterIl existe de nombreux Buttoncomposants dans , tels que RaisedButton, FlatButton, IconButtton, OutlineButton, ButtonBar, FloatingActionButtonetc.
RaisedButton: Le bouton en relief est en fait Material Designle style Button.
FlatButton: Bouton plat
OutlineButton: Bouton filaire
ButtonBar: Groupe de boutons
FloatingActionButton: Bouton flottant

Bouton surélevé

Les attributs	décrire
textColor	couleur du texte
color	Couleur du bouton
disabledColor	La couleur du bouton lorsqu'il est désactivé
disabledTextColor	Couleur du texte lorsque le bouton est désactivé
splashColor	La couleur de l'eau ondule lorsque l'on clique sur le bouton
highlightColor	La couleur du bouton après avoir cliqué (appui long) sur le bouton
elevation	La plage de l'ombre, plus la valeur est grande, plus la plage de l'ombre est grande
padding	Rembourrage
shape	définir la forme du bouton

Bouton d'action flottant

Les attributs	décrire
child	Sous-vue, généralementIcon
tooltip	FAB s'affiche lorsqu'on l'appuie longuement, ce qui est aussi une fonction d'accessibilité
backgroundColor	Couleur de l'arrière plan
elevation	ombre lorsqu'on ne clique pas
highlightElevation	Valeur de l'ombre lorsque vous cliquez dessus, par défaut 12,0
onPressed	Cliquez sur le rappel d'événement
shape	Vous pouvez définir la forme du FAB, etc.
mini	Est-ce minile type par défautfalse

La démo du bouton qui imite le centre de la page d'accueil du poisson salé

class Tabs extends StatefulWidget{
  final index;

  Tabs({this.index=0});

  @override
  State<StatefulWidget> createState() {
    return _TabsState(index);
  }

}

class _TabsState extends State<Tabs>{
  List<Widget> _page=[HomePage(),SettignPage(),MinePage()]; //用于存放对应的页面
  int _bottomIndex=0;

  _TabsState(index){
   _bottomIndex=index;
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      
      appBar: AppBar(title: Text('Flutter BottomNavigationBar'),),
      body:this._page[_bottomIndex],
      floatingActionButton: Container(
        width: 80,
        height: 80,
        padding: EdgeInsets.all(10),
        margin: EdgeInsets.only(top: 8),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(40),
        ),
        child:  FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
              setState(() {
                _bottomIndex=1;
              });
          },
        ),
      ),
      floatingActionButtonLocation:FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        iconSize: 25,

        type: BottomNavigationBarType.fixed,  //配置底部tabs可以有多个按钮
        currentIndex: this._bottomIndex,//对应点击/显示哪个底部导航栏按钮
        onTap: (index){ //bottomNavigationBar的点击事件
          setState(() {
            this._bottomIndex=index;  //将选中的下标进行替换
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('首页')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text('设置')
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.mood),
              title: Text('我的')
          ),
         
        ],
      ),
      drawer: Drawer(
        child: Column(
          children: <Widget>[
              Row(
                children: <Widget>[
                  UserAccountsDrawerHeader(

                  ),
                ],
              ),
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.home),
              ),
              title: Text('空间'),
            ),
            Divider(),//一条线
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.people),
              ),
              title: Text('用户中心'),
            ),
            Divider(),//一条线
          ],
        ),
      ),
      endDrawer: Drawer(
        child: Column(
          children: <Widget>[

            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
            ),
            Divider(),//一条线
          ],
        )
      ),
    );
  }
}