15. Flutterラーニングパスボタンコンポーネントシリーズ

Flutterには、、、、、、など、多くのコンポーネントButtonがあります。: 浮き上がったボタンが実際のスタイルです: フラット ボタン: ワイヤーフレーム ボタン: ボタン グループ: フローティング ボタンRaisedButtonFlatButtonIconButttonOutlineButtonButtonBarFloatingActionButton
RaisedButtonMaterial DesignButton
FlatButton
OutlineButton
ButtonBar
FloatingActionButton

浮き上がったボタン

属性	説明する
textColor	テキストの色
color	ボタンの色
disabledColor	無効時のボタンの色
disabledTextColor	ボタンが無効な場合の文字の色
splashColor	ボタンをクリックしたときの水の波紋の色
highlightColor	ボタンをクリック（長押し）した後のボタンの色
elevation	影の範囲、値が大きいほど影の範囲が広くなります
padding	パディング
shape	ボタンの形状を設定する

フローティングアクションボタン

属性	説明する
child	サブビュー、通常Icon
tooltip	長押しするとFABが表示されますが、これもアクセシビリティ機能です
backgroundColor	背景色
elevation	クリックしていないときは影を付ける
highlightElevation	クリック時のシャドウ値、デフォルトは 12.0
onPressed	クリックイベントコールバック
shape	FABの形状などを定義できます。
mini	miniタイプデフォルトですかfalse

塩辛ホームページの中心を模したボタンデモ

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(),//一条线
          ],
        )
      ),
    );
  }
}