Flutter Widget 之ToggleButtons

你想让你的用户从多个相关选项中选择吗？将TaggleButtons添加到你的应用以做到这点

要构建你的TaggleButtons,提供一个widget列表以用于这组按钮，在这种情况下，我们为每个按钮使用一个图标，接下来，设置isSelected参数——这需要一个与子元素列表相同长度的列表布尔值。isSelected控制选择那个按钮，这里我们通过有状态的窗口widget中的变量控制按钮的选择。最后，将一个函数传递给onPressed在用户按下按钮时做出响应,你可以控制选择行为。例如，次函数允许选择多少个按钮

// Initialized inside a stateful widget
List<bool> _selections = List.generate(3, (_) => false);

// Later, in the build method:
ToggleButtons(
    children: [
        Icon(Icons.local_cafe),
        Icon(Icons.fastfood),
        Icon(Icons.cake),
    ],
    isSelected: _selections,
    onPressed: (int index) {
        setState(() {
            _selections[index] = !_selections[index];
        });
    }
)

现在，已经有了不错的切换按钮行

如果不想让按钮继承应用程序的默认设置，还有许多其他参数可以让你自定义按钮的外观,你可以设置为选择按钮时、按钮被动选择后以及诉讼选按钮的背景的文本和图标颜色

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: ...,
    color: Colors.green,
    selectedColor: Colorss.orange
)

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: ...,
    color: Colors.green,
    selectedColor: Colorss.orange,
    fillColor: Colors.red,
)

你可以控制按钮之间没有边框

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: ...,
    renderBorder: false,
)

你可以控制边框形状、颜色和大小

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: ...,
    borderRadius: BorderRadius.circular(30),
    borderWidth: 5,
    borderColor: Colors.orange,
    selectedBorderColor: Colors.deepOrange,
)

你甚至可以为InkWell设置颜色以及长按按钮后的突出显示颜色

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: ...,
    color: Colors.green,
    selectedColor: Colors.orange,
    fillColor: Colors.red,
    splashColor: Colors.purple,
    highlightColor: Colors.yellow,
)

当切换按钮的选择被禁用时也可以设置颜色

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: null,
    disabledColor: Colors.grey[300],
    disabledBorderColor: Colors.blueGrey,
)

吐过应用程序在带键盘的环境中运行，你可以自定义颜色以表示按钮已对准焦点，如果应用程序在使用鼠标的环境中运行，你可以设置悬停颜色

ToggleButtons(
    children: ...,
    isSelected: _selections,
    onPressed: ...,
    focusColor: Colors.cyan,
    focusNodes: [
        _focusButton1,
        _focusButton2,
        _focusButton3,
    ],
    hoverColor: Colors.yellow,//鼠标悬停颜色
),

如果想了解有关ToggleButtons 的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址