user-interface - Flutter 中的水平按钮组

Question

我正在尝试使用 flutter 构建一个水平按钮组，但我没有达到预期的效果，我是使用 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"),
                  ),
                ),                        
              ],
            )

给出的结果:

期望的结果

Answer 1

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

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