Flutter 中的水平按钮组答案

【问题标题】：Horizontal button group in FlutterFlutter 中的水平按钮组
【发布时间】：2019-08-15 12:29:05
【问题描述】：

我正在尝试使用颤振构建一个水平按钮组，但我没有达到预期的效果，在使用 dart 构建 UI 时我是新手，如何调整代码以达到预期的结果？

您将在下面找到我目前的进度和想要的结果！

当前按钮行

//Horizontal buttons row    
            Wrap(                  
              direction: Axis.horizontal,
              children: <Widget>[
                ButtonTheme(
                  minWidth: 40.0,
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("A"),
                  ),
                ),
                ButtonTheme(
                  minWidth: 40.0,
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("B"),
                  ),
                ),
                ButtonTheme(
                  minWidth: 40.0,
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("C"),
                  ),
                ),
                ButtonTheme(
                  minWidth: 40.0,
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("D"),
                  ),
                ),
                ButtonTheme(
                  minWidth: 40.0,
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("E"),
                  ),
                ),
                ButtonTheme(
                  minWidth: 40.0,                     
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("F"),
                  ),
                ),
                ButtonTheme(
                  minWidth: 40.0,
                  child: RaisedButton(
                    color: Colors.white,
                    onPressed: () {},
                    child: Text("G"),
                  ),
                ),                        
              ],
            )

给定结果：

想要的结果

【问题讨论】：

标签： user-interface flutter dart

【解决方案1】：

您可以使用更易于访问且与 web 和桌面中的 tabindex 兼容的 ToggleButtons https://api.flutter.dev/flutter/material/ToggleButtons-class.html

https://www.youtube.com/watch?v=kVEguaQWGAY

【讨论】：

【解决方案2】：

我是这样做的：

Widget specialCharsPanel() {
  return Container(
    child: Material(
      elevation: 4.0,
      borderRadius: BorderRadius.all(Radius.circular(6.0)),
      child: Wrap( 
        direction: Axis.horizontal,                    
        children: <Widget>[
          SpecialChar("A"),
          SpecialChar("B"),
          SpecialChar("C"),
          SpecialChar("D"),
          SpecialChar("E"),
          SpecialChar("F"),
          SpecialChar("G"),                 
        ],
      ),
    ),
  );
}

【讨论】：

【解决方案3】：

您可以将RaisedButton 包装为Container 而不是ButtonTheme，这将为您提供所需的输出。

【讨论】：