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

在flutter中，有多种按钮组件可以供开发者使用，例如raisedbutton、flatbutton、iconbutton、outlinebutton、buttonbar和floatingactionbutton等。以下是对这些按钮组件的详细介绍：

• RaisedButton：这是一种具有Material Design风格的凸起按钮。以下是其主要属性及其描述：

  属性	描述
  textColor	文本颜色
  color	按钮背景颜色
  disabledColor	按钮被禁用时的背景颜色
  disabledTextColor	按钮被禁用时的文本颜色
  splashColor	点击按钮时水波纹的颜色
  highlightColor	长按按钮时高亮的颜色
  elevation	按钮的阴影范围
  padding	按钮的内边距
  shape	按钮的形状

• FlatButton：这是一种扁平化的按钮，通常用于界面中需要较少视觉强调的部分。

• OutlineButton：这是一种线框按钮，通常用于界面中需要更低视觉强调的部分。

• ButtonBar：这是一种用于排列多个按钮的组件，通常用于界面中需要展示一组按钮的地方。

  

  ClipDrop

  Stability.AI出品的图片处理系列工具（背景移除、图片放大、打光）

  下载

• FloatingActionButton：这是一种浮动按钮，通常用于界面中需要快速访问某个功能的地方。以下是其主要属性及其描述：

  属性	描述
  child	子视图，通常为一个图标
  tooltip	长按时显示的提示信息
  backgroundColor	按钮的背景颜色
  elevation	未点击时的阴影
  highlightElevation	点击时的阴影
  onPressed	点击事件的回调函数
  shape	按钮的形状
  mini	是否为小型按钮

以下是一个仿照咸鱼首页居中的按钮示例代码：

class Tabs extends StatefulWidget {
  final index;
  Tabs({this.index = 0});

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

class _TabsState extends State {
  List _pages = [HomePage(), SettingPage(), MinePage()]; // 用于存放对应的页面
  int _bottomIndex = 0;

  _TabsState(index) {
    _bottomIndex = index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter BottomNavigationBar')),
      body: this._pages[_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,
        currentIndex: this._bottomIndex,
        onTap: (index) {
          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: [
            Row(
              children: [
                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: [
            ListTile(
              leading: CircleAvatar(
                child: Icon(Icons.settings),
              ),
              title: Text('设置中心'),
            ),
            Divider(),
          ],
        )
      ),
    );
  }
}