如何在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給出了這個，這非常接近我需要的（理想情況下文本會更大並且換行 - 如果沒有給出正確的空間它似乎會溢出，但我想我可以處理這個問題事情就是這樣）：

但是當我將 go 設置為橫向模式時，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'),
  ),
);

Answer 3

截至目前 flutter 3.3.10 不支持凸起按鈕。 但是您可以使用其他按鈕，例如 TextButton，為此您只需要將它包裝在 AspectRatio 小部件中

就像前面的例子

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

不要將 AspectRatio 小部件放在無限高度或寬度小部件內，以避免呈現錯誤。