[英]How to make multiple Cupertino buttons in SafeArea in Flutter?
I am creating a flutter app which has a gridview of Cupertino buttons which are all gonna be clickable and when clicked pass on to a new page.我正在创建一个 flutter 应用程序,它有一个 gridview 的 Cupertino 按钮,这些按钮都是可点击的,点击后会转到新页面。 I have managed to create one Cupertino button with the help of this article - https://medium.com/@zhijjjj/flutter-ios-style-clickable-card-35aa151a6116 I want to make many more buttons, but I am unable to work out the way.
在本文的帮助下,我设法创建了一个 Cupertino 按钮 - https://medium.com/@zhijjjj/flutter-ios-style-clickable-card-35aa151a6116我想制作更多按钮,但我无法解决办法。 Please can someone help me?
请问有人可以帮我吗?
You can try GridView
in a flutter您可以在 flutter 中尝试
GridView
How to use GridView? GridView如何使用? Here are many examples how to use it
这里有很多例子如何使用它
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()),
);
}
}
EDIT Asked编辑问
if I want multiple cards with different images in the background and different text on top of it, can it be possible?
如果我想要多张卡片,背景中有不同的图像,上面有不同的文字,有可能吗?
Then you can use flutter_staggered_grid_view
plugin you can find it here然后你可以使用
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,
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.