如何在 Flutter 的 SafeArea 中制作多个 Cupertino 按钮？答案

【问题标题】：How to make multiple Cupertino buttons in SafeArea in Flutter?如何在 Flutter 的 SafeArea 中制作多个 Cupertino 按钮？
【发布时间】：2020-10-25 14:00:35
【问题描述】：

我正在创建一个 Flutter 应用程序，它有一个 Cupertino 按钮的网格视图，这些按钮都是可点击的，点击后会转到新页面。在本文的帮助下，我设法创建了一个 Cupertino 按钮 - https://medium.com/@zhijjjj/flutter-ios-style-clickable-card-35aa151a6116 我想制作更多按钮，但我无法解决问题。请问有人可以帮我吗？

【问题讨论】：

使用列表视图或网格视图

标签： flutter flutter-cupertino

【解决方案1】：

你可以试试GridView@

如何使用GridView？ Here are many examples怎么用

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(

      color: Colors.white30,
      child: GridView.count(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: <String>[
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
            'http://www.for-example.org/img/main/forexamplelogo.png',
          ].map((String url) {
            return GridTile(
                child: Image.network(url, fit: BoxFit.cover));
          }).toList()),
    );
  }
}

编辑询问

如果我想在背景中有多张带有不同图像的卡片，并且上面有不同的文字，可以吗？

然后你可以使用flutter_staggered_grid_view插件你可以找到它here

new StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)

【讨论】：

谢谢你，但如果我想要多张卡片，背景不同，上面有不同的文字，可以吗？