作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要将 GridView 的所有项目与水平线和垂直线分开。
谢谢
GridView(
shrinkWrap:true,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio: 1.0,
mainAxisSpacing: 2.0,
crossAxisSpacing: 2.0,
crossAxisCount: 3),
children: <Widget>[
GestureDetector(
onTap: () {
//_settingModalBottomSheet(context);
},
child: itemWidgetDialog()
),
for (int i=0; i<10;i++) ...[
itemWidgetDialog()
]
],
)),
最佳答案
编辑 你需要 GridTile
代码片段
GridTile(
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.black, width: 0.5)),
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = "Grid List";
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: GridView.count(
crossAxisCount: 3,
children: List.generate(choices.length, (index) {
return Center(
child: ChoiceCard(choice: choices[index]),
);
}))));
}
}
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.drafts),
const Choice(title: 'Boat', icon: Icons.dvr),
const Choice(title: 'Bus', icon: Icons.copyright),
const Choice(title: 'Train', icon: Icons.cloud_off),
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.drafts),
const Choice(title: 'Boat', icon: Icons.dvr),
const Choice(title: 'Bus', icon: Icons.copyright),
const Choice(title: 'Train', icon: Icons.cloud_off),
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.drafts),
const Choice(title: 'Boat', icon: Icons.dvr),
const Choice(title: 'Bus', icon: Icons.copyright),
const Choice(title: 'Train', icon: Icons.cloud_off),
];
class ChoiceCard extends StatelessWidget {
const ChoiceCard({Key key, this.choice}) : super(key: key);
final Choice choice;
@override
Widget build(BuildContext context) {
final TextStyle textStyle = Theme.of(context).textTheme.display1;
return GridTile(
child: Container(
decoration:
BoxDecoration(border: Border.all(color: Colors.black, width: 0.5)),
child: Card(
color: Colors.white,
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(choice.icon, size: 80.0, color: textStyle.color),
Text(choice.title, style: textStyle),
]),
)),
));
}
}
关于flutter - 如何在 flutter 中创建分隔符 GridView ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57538114/
我是一名优秀的程序员,十分优秀!