Flutter实现指定样式可选按钮：无图标首按钮+换行布局求助

需求与问题 #

需要实现一组可选按钮，要求：

• 第一个「All」按钮不显示图标
• 最后两个按钮（Reel、Story）自动换行显示
  当前实现存在两个问题：所有按钮强制显示图标，且无法实现换行效果。

解决步骤与代码修改 #

一、修正变量定义（主文件） #

首先调整主文件中的数据列表，匹配按钮数量并为第一个按钮设置空图标：

// 第一个元素设为null，对应All按钮无图标
List<IconData?> icon = [null, Icons.photo, Icons.video_call, Icons.video_library, Icons.add_circle];
// isSelected长度需与innerText一致，改为5个元素
List<bool> isSelected = List.generate(5, (index) => false);
List<String> innerText = ['All', 'Photo', 'Video', 'Reel', 'Story'];

二、重构按钮组件 #

替换原ToggleButtons为Wrap实现换行，同时修改CustomButton支持无图标状态：

import 'package:flutter/material.dart';
import '../my_const.dart';

class MyToggleButtons extends StatelessWidget{
  final List<String> text;
  final List<IconData?> iconData;
  final List<bool> isSelected;
  final Function setStateFunction;
  const MyToggleButtons({Key? key, required this.text, required this.iconData, required this.isSelected, required this.setStateFunction,})
      : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10, // 按钮横向间距
      runSpacing: 10, // 行与行的纵向间距
      children: List<Widget>.generate(text.length, (index){
        return GestureDetector(
          onTap: (){
            setStateFunction((){
              isSelected[index] = !isSelected[index];
            });
          },
          child: CustomButton(
            text: text[index],
            iconData: iconData[index],
            isSelected: isSelected[index],
          ),
        );
      }),
    );
  }
}

class CustomButton extends StatelessWidget {
  final String text;
  final IconData? iconData; // 改为可选参数，允许为null
  final bool isSelected;
  const CustomButton({Key? key, required this.text, this.iconData, this.isSelected = false, }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox.fromSize(
      size: const Size(102, 52),
      child: Container(
        decoration: BoxDecoration(
          color: isSelected ? kBlue : superWhite,
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
              width: 3.0,
              color: kBlue
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 仅当iconData不为null时才渲染图标
            if(iconData != null)
              Icon(iconData,
                color: isSelected ? Colors.white : Colors.blue,),
            Text(text, style: TextStyle(
                fontSize: 14,
                color: isSelected ? Colors.white : kBlue,
                fontWeight: FontWeight.w600
            ),)
          ],
        ),
      ),
    );
  }
}

关键说明 #

1. 换行实现：ToggleButtons是横向滚动布局，无法自动换行，改用Wrap组件可根据屏幕宽度自动换行，满足最后两个按钮换行需求。
2. 无图标按钮处理：将iconData改为IconData?可空类型，通过条件渲染控制图标显示，第一个按钮传入null即可隐藏图标。
3. 选中状态逻辑：用GestureDetector包裹每个按钮，替代原ToggleButtons的点击事件逻辑，实现单个按钮的选中状态切换。

内容的提问来源于stack exchange，提问作者Edgar