flutter - 如何在 Flutter 的 SafeArea 中制作多个 Cupertino 按钮？

Question

我正在创建一个颤振应用程序，它有一个库比蒂诺按钮的网格视图，这些按钮都是可点击的，当点击时传递到一个新页面。在这篇文章的帮助下，我设法创建了一个 Cupertino 按钮 - https://medium.com/@zhijjjj/flutter-ios-style-clickable-card-35aa151a6116 我想制作更多按钮，但我无法解决办法。请问有人可以帮我吗？

Answer 1

你可以尝试GridView一下

如何使用网格视图？这里有很多例子如何使用它

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插件，你可以在这里找到它

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,
)