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

Question

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

当我使用提供的代码时，我得到了

如何去掉左边和右边的space？

是否可以滚动 toggleButtons - 甚至滚动到 "page" 它们（点击切换按钮左侧和右侧的按钮，然后 "scroll/move" 按一个方向的一个图标)?

Answer 1

您可以像这样用 SingleChildScrollView 包装任何小部件：

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

Answer 2

下一个 Flutter 版本可能会包含一个 PR，它将 constraints 参数添加到 ToggleButtons 小部件 (https://github.com/flutter/flutter/pull/39857)。在此之前，您可以使用 SingleChildScrollView 方法。

Answer 3

如何去掉左边和右边的space？

Bogdan Orzea 如是说，在 Flutter 上一个版本（版本 1.9.1）中，无法更改 ToggleButtons 子项的填充。可能在下一个 Flutter 版本中这将成为可能。如果等不及下个版本，可以将 Flutter 更新到 1.12.13+hotfix.3 (beta) 版本。在这个 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')
    )
  ],
)

是否可以滚动切换按钮 - 甚至滚动到 "page" 它们（单击切换按钮左侧和右侧的按钮以及 "scroll/move"一个方向的一个图标)?

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

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

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

How to remove space from ToggleButtons in Flutter and make it scroll

user-interface

togglebutton

flutter