15.Flutter学习之路按钮组件系列

Flutter中有很多Button组件，例如RaisedButton、FlatButton、IconButtton、OutlineButton、ButtonBar、FloatingActionButton等。
RaisedButton：凸起的按钮，其实就是Material Design风格的Button.
FlatButton:扁平化的按钮
OutlineButton:线框按钮
ButtonBar:按钮组
FloatingActionButton:浮动按钮

RaisedButton

属性	描述
textColor	文本颜色
color	按钮颜色
disabledColor	按钮被禁用时的颜色
disabledTextColor	按钮被禁用时的文本颜色
splashColor	点击按钮时水波纹的颜色
highlightColor	点击(长按)按钮后按钮的颜色
elevation	阴影的范围，值越大阴影范围越大
padding	内边距
shape	设置按钮形状

FloatingActionButton

属性	描述
child	子视图，一般为Icon
tooltip	FAB被长按时显示，也是无障碍功能
backgroundColor	背景颜色
elevation	未点击时的阴影
highlightElevation	点击时阴影值，默认12.0
onPressed	点击事件回调
shape	可以定义FAB的形状等
mini	是否是mini类型默认false

仿咸鱼首页居中的Button Demo

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