信息发布→ 登录 注册 退出

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

发布时间:2025-07-22

点击量:

在flutter中,有多种按钮组件可以供开发者使用,例如raisedbuttonflatbuttoniconbuttonoutlinebuttonbuttonbarfloatingactionbutton等。以下是对这些按钮组件的详细介绍:

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

    属性 描述
    textColor 文本颜色
    color 按钮背景颜色
    disabledColor 按钮被禁用时的背景颜色
    disabledTextColor 按钮被禁用时的文本颜色
    splashColor 点击按钮时水波纹的颜色
    highlightColor 长按按钮时高亮的颜色
    elevation 按钮的阴影范围
    padding 按钮的内边距
    shape 按钮的形状
  • FlatButton:这是一种扁平化的按钮,通常用于界面中需要较少视觉强调的部分。

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

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

  • 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(),
          ],
        )
      ),
    );
  }
}

标签:# 这是一种  # 更低  # 回调  # 较少  # 详细介绍  # 提示信息  # 多个  # 是一个  # 其主要  # 首页  # linux  # flutter  # padding  # 内边距  # 事件  # 回调函数  # 排列  # 点击事件  # ai  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!