如何在 Flutter 中制作方形凸起按钮？

Question

我在 Wrap 中有一大堆 RaisedButtons，这样它们就可以根据需要占用尽可能多的行。但我确实想将按钮扩展为方形按钮。我可以通过将Wrap 替换为GridView.count 并使用crossAxisCount 来做到这一点，但是当有更多可用空间时，按钮会变得不必要地大。基本上，我希望它们都是相同大小的正方形，都只有它们所容纳的内容那么大。它们不是动态加载的或其他任何东西，因此无需担心性能。但是我们正在研究相当小的屏幕的可能性，因此滚动也需要成为可能。有没有办法让所有这些事情都正确？

这是当前代码及其产生的结果：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Wrap(
        direction: Axis.horizontal,
        children: <Widget>[
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Park In', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.add),
          ),
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Park Out', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.eject),
          ),
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Maintainence In', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.vertical_align_bottom),
          ),
          RaisedButton.icon(
            onPressed: () {}
            label: Text('Maintainence Out', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.vertical_align_top),
          ),
          RaisedButton.icon(
            onPressed: null,
            label: Text('Move', style: TextStyle(fontSize: 15.0)),
            icon: Icon(Icons.open_with),
          ),
        ],
      ),
    );
  }

用 2 替换 GridView 作为crossAxisCount 给出了这个，这非常接近我需要的（理想情况下，文本会更大并且换行 - 如果没有给出正确的空间，它似乎会溢出，但我想我可以解决这个问题）：

但是当我进入例如横向模式时，可以轻松地将 3 个按钮放在一行中，GridView 只是“嗯，随便”，并使按钮变得巨大：

Answer 1

您可以为此使用OrientationBuilder。它将为您处理方向更改：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("word"),
    ),
    body: OrientationBuilder(
      builder: (context, orientation) {
        int count = 2;
        if(orientation == Orientation.landscape){
          count = 3;
        }
        return GridView.count(
          crossAxisCount: count,
          children: <Widget>[
            RaisedButton.icon(
              onPressed: () {},
              label: Text('Park In', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.add),
            ),
            RaisedButton.icon(
              onPressed: () {},
              label: Text('Park Out', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.eject),
            ),
            RaisedButton.icon(
              onPressed: () {},
              label:
                  Text('Maintainence In', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.vertical_align_bottom),
            ),
            RaisedButton.icon(
              onPressed: () {},
              label:
                  Text('Maintainence Out', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.vertical_align_top),
            ),
            RaisedButton.icon(
              onPressed: null,
              label: Text('Move', style: TextStyle(fontSize: 15.0)),
              icon: Icon(Icons.open_with),
            ),
          ],
        );
      },
    ),
  );
}

Answer 2

试试AspectRatio

AspectRatio(
  aspectRatio: 1,
  child: RaisedButton(
    onPressed: () {},
    child: Text('hi'),
  ),
);