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

Question

我在一个 Wrap 中有一大堆 RaisedButton，因此它们可以根据需要占用任意多的行。但我确实想将按钮扩展为方形按钮。我可以通过将 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),
          ),
        ],
      ),
    );
  }

将 GridView 替换为 2 作为 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),
            ),
          ],
        );
      },
    ),
  );
}