15.Flutter学习之路按钮组件系列-linux运维-PHP中文网

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

看不見的法師

发布： 2025-07-22 10:00:29

原创

848人浏览过

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

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

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

FlatButton：这是一种扁平化的按钮，通常用于界面中需要较少视觉强调的部分。
OutlineButton：这是一种线框按钮，通常用于界面中需要更低视觉强调的部分。
ButtonBar：这是一种用于排列多个按钮的组件，通常用于界面中需要展示一组按钮的地方。

豆包爱学
豆包旗下AI学习应用

674

查看详情

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

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

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

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

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

class _TabsState extends State<Tabs> {
  List<Widget> _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: <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(),
          ],
        )
      ),
    );
  }
}

登录后复制

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