Flutter ToggleButtons 在 AppBar 操作中溢出

Question

包裹在 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,   
        ),
      ),
    ),
  );
}
}

Answer 1

根据源代码文档

final List? actions; This widget is stacked behind the toolbar and the tab bar. Its height will be the same as the app bar's overall height. Typically, these widgets are IconButton representing common operations. For less common operations, consider using a PopupMenuButton as the last action.

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

代码片段

@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,
                ),
              ),
            ),
          ],
        ),
    /// ........

Flutter ToggleButtons 在 AppBar 操作中溢出

Flutter ToggleButtons overflowing in AppBar actions

appbar

overflow

flutter