如何从 Flutter 中的 ToggleButtons 中删除空间并使其滚动

Question

在 ToggleButtons-Example 中，图标之间没有太多空间：https : //api.flutter.dev/flutter/material/ToggleButtons-class.html

当我使用提供的代码时，我明白了

如何删除左侧和右侧的空间？

是否可以滚动切换按钮 - 或者甚至“翻页”它们（单击切换按钮左侧和右侧的按钮，并在一个方向上通过一个图标“滚动/移动”）？

Answer 1

如何删除左侧和右侧的空间？

Bogdan Orzea 怎么说，在 Flutter 上一个版本（1.9.1 版）中，不可能更改 ToggleButtons 子项的填充。可能在下一个 Flutter 版本中，这将成为可能。如果您等不及下一个版本，可以将 Flutter 更新到 1.12.13+hotfix.3 (beta) 版本。在这个测试版中，ToggleButtons 的子项将是方形的，如 ToggleButtons-Example 中所示，您可以使用 Padding Widget 更改填充，如下面的代码：

ToggleButtons(
  children: <Widget>[
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 1')
    ),
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 2')
    ),
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 3')
    ),
    Padding(
      padding: EdgeInsets.only(left: 40.0, right: 40.0),
      child: Text('Option 4')
    )
  ],
)

是否可以滚动切换按钮 - 或者甚至“翻页”它们（单击切换按钮左侧和右侧的按钮，并在一个方向上通过一个图标“滚动/移动”）？

将您的 ToggleButton 包裹在 SingleChildScrollView 小部件中：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ToggleButtons(
    children: (...)
  )
)