flutter - Flutter GridView item wrap_content 高度
问题描述
我是一名 android 开发人员,并且是 Flutter 的新手。
我想创建一个项目高度(我在屏幕截图GridView
中用wrap content
钢笔绘制它)。但我尝试过使用以下代码,它只给了我方形网格项。我想如何获得高度环绕内容网格项目,但我不知道也找不到如何获得它。请帮忙。谢谢你。
class CategoryItem extends StatelessWidget {
final Category category;
CategoryItem({Key key, @required this.category})
: assert(category != null),
super(key: key);
@override
Widget build(BuildContext context) {
return Card(
child: Text(
category.name,
style: TextStyle(fontSize: 34.0, fontWeight: FontWeight.bold),
),
color: Colors.amberAccent,
);
}
}
class CategoryGrid extends StatefulWidget {
final List<Category> items;
const CategoryGrid({Key key, this.items}) : super(key: key);
@override
_CategoryGridState createState() => _CategoryGridState();
}
class _CategoryGridState extends State<CategoryGrid> {
@override
Widget build(BuildContext context) {
final Orientation orientation = MediaQuery.of(context).orientation;
return Column(
children: <Widget>[
Expanded(
child: SafeArea(
top: false,
bottom: false,
child: GridView.builder(
itemCount: widget.items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: (orientation == Orientation.portrait) ? 2 : 3,),
itemBuilder: (BuildContext context, int index) {
return CategoryItem(category: widget.items[index],);
},
),
),
),
],
);
}
}
解决方案
对于高度,您可以使用“childAspectRatio”
例如-
GridView.count(
childAspectRatio: 4.0,
crossAxisCount: 2,
padding: EdgeInsets.all(5.0),
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 5.0),
child: Text(
'10:00 AM - 12:00 PM',
style: new TextStyle( color: Colors.black87, fontSize: 14.0,
fontWeight: FontWeight.normal,
),
),
);
],
shrinkWrap: true,
// todo comment this out and check the result
physics: ClampingScrollPhysics(),
)
推荐阅读
- testing - 如何衡量静态测试覆盖率?
- reactjs - 如何创建动态更新选项列表的 React 下拉表单?
- javascript - 如何更改菜单切换时显示的离子图标
- ios - 如何修复 fullName 属性的设置器以启用 firstName 和 lastName 属性的自动更新?
- algorithm - 使用广度优先搜索而不是双向搜索?
- python - 向 Django 中的总函数添加税金
- express - 设置具有多个目标的代理服务器?
- python - Python 3.8 的点子
- spring-boot - 使用SendToDlqAndContinue spring kafka流活页夹的序列化异常
- react-native - React-Native-Firebase:发生网络错误(如超时、连接中断或主机无法访问)