在 AppBar 操作中溢出的 Flutter ToggleButtons答案

【问题标题】：Flutter ToggleButtons overflowing in AppBar actions在 AppBar 操作中溢出的 Flutter ToggleButtons
【发布时间】：2021-10-28 11:15:11
【问题描述】：

包装在 SingleChildScrollView 中的相当宽的 ToggleButtons 在 AppBar 操作中溢出，但在正文中没有。有没有办法解决这个问题？

任何建议表示赞赏！

class _ToggleState extends State<Toggle> {
List<bool> selectList = [
10 items here
];
List<String> catList = [
10 items here
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Title'),
      actions: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: ToggleButtons(
            children: catList.map((item) => Text(item)).toList(),
            isSelected: selectList,
          
          ),
        ),
      ],
    ),
    body: Center(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: ToggleButtons(
          children: catList.map((item) => Text(item)).toList(),
          isSelected: selectList,   
        ),
      ),
    ),
  );
}
}

【问题讨论】：

你能不能用容器包装appbar的SingleChildScrollView并给它一个宽度。

标签： flutter overflow appbar

【解决方案1】：

根据源代码文档

最终名单？行动； 此小部件堆叠在工具栏和选项卡栏的后面。它的高度将与应用栏的整体高度相同。通常，这些小部件是代表常用操作的 IconButton。对于不太常见的操作，请考虑使用PopupMenuButton 作为最后一个操作。

如果您仍然希望处理这种情况，我们可以使用LayoutBuilder 或mediaQuery 来获取大小并处理提供appBar 元素宽度的UI。

代码 sn-p

@override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) => Scaffold(
        appBar: AppBar(
          title: SizedBox(
            width: constraints.maxWidth * .2,
            child: Text('title'),
          ),
          automaticallyImplyLeading: false,
          actions: [
            SizedBox(
              width: constraints.maxWidth * .8,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: ToggleButtons(
                  onPressed: (v) {
                    print(v);
                  },
                  direction: Axis.horizontal,
                  children: catList.map((item) => Text(item)).toList(),
                  isSelected: selectList,
                ),
              ),
            ),
          ],
        ),
    /// ........

【讨论】：

非常感谢！那信息量很大。我很感激你的帮助。一切顺利。