Flutter 菜单切换样式

最新推荐文章于 2025-04-18 10:16:58 发布

好名字都被猪取了-

最新推荐文章于 2025-04-18 10:16:58 发布

阅读量1.9k

点赞数

分类专栏： Flutter

本文链接：https://blog.youkuaiyun.com/lyj1005353553/article/details/103596611

版权

Flutter 专栏收录该内容

4 篇文章

订阅专栏

本文分享了一种在Flutter中创建自定义TabBar组件的方法，通过GestureDetector和Container实现了动态选中效果，代码示例展示了如何根据不同状态改变背景颜色、边框和文字样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先来看效果图
就是全局~第三局这些菜单点击选中切换效果的实现
之前做这个的时候，有尝试用ChoiceChip去做，不过这个场景的话，用这个有点大材小用，还是换了最直接的方式实现，但个人感觉还是不怎么完美，还是直接上代码吧：

 int _currentSelectIndex = 0;

  List<Widget> _getTabs() {
    List<Widget> tabWidgets = List();
    for (int i = 0; i < 5; i++) {
      tabWidgets.add(new GestureDetector(
          onTap: () {
            setState(() {
              _currentSelectIndex = i;
            });
          },
          child: new Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(top: 3, bottom: 3, right: 10, left: 10)
            decoration: new BoxDecoration(
              color: _currentSelectIndex == i ? Colors.orange : Colors.white,
              borderRadius: _setBorder(i),
              border: Border.all(
                  width: 0,
                  color: _currentSelectIndex == i ? Colors.orange : Colors.grey),
            ),
            child: Text(
              "第${i}局",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 13,
                  color: _currentSelectIndex == i
                      ? Colors.black
                      : Colors.pinkAccent),
            ),
          )));
    }
    return tabWidgets;
  }

  BorderRadiusGeometry _setBorder(int index) {
    BorderRadiusGeometry borderRadiusGeometry;
    switch (index) {
      case 0:
        borderRadiusGeometry = BorderRadius.only(
            topLeft: Radius.circular(5), bottomLeft: Radius.circular(5));
        break;
      case 4:
        borderRadiusGeometry = BorderRadius.only(
            topRight: Radius.circular(5), bottomRight: Radius.circular(5));
        break;
    }
    return borderRadiusGeometry;
  }

复制之后可以直接拿去测试看效果。