user-interface - 如何从 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: (...)
  )
)