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

Question

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

Answer 1

你可以试试GridView在flutter

如何使用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()),
    );
  }
}

编辑问

if I want multiple cards with different images in the background and different text on top of it, can it be possible?

然后就可以使用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,
)

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

How to make multiple Cupertino buttons in SafeArea in Flutter?

flutter

flutter-cupertino