flutter - 如何使底部表格的高度跟随 JSON 的项目数量
问题描述
BottomSheet
在 Flutter 中,高度跟随项目数(来自 JSON 的数据)是什么?因为我让高度不跟随数据量,而是跟随每部手机屏幕的 1/2。因此,如果手机很长,则底部有空白空间。如果手机短,数据会被下面的屏幕截断。
这是创建底部工作表的代码:
void _showModalBottomSheet(AsyncSnapshot<CatlistResult> snapshot) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return Card(
elevation: 3.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
child: Container(
padding: EdgeInsets.only(left: 16.0, top: 10.0, right: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 10.0),
child: Image.asset('assets/images/main/more_2lines_20dp.png', scale: 3.5),
),
Expanded(
child: GridView.builder(
physics: NeverScrollableScrollPhysics(), //kill scrollable
shrinkWrap: true,
itemCount: snapshot == null ? 0 : snapshot.data.catlist.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
itemBuilder: (BuildContext context, int index) {
var numItems = snapshot.data.catlist[index];
if (numItems.f == 1) {
if (numItems.b == 0) {
return GestureDetector(
child: Card(
elevation: 0.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/main/cat_${numItems.a}.png', fit: BoxFit.cover, width: 50.0, height: 50.0),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Text(
numItems.c,
maxLines: 2,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 10),
),
),
],
),
),
);
}
}
},
),
),
],
),
),
);
}
);
}
这是我的代码的结果:
- 从 iOS 模拟器运行
- 从 Android 模拟器运行
解决方案
问题:
在您的父母
Column
中,您正在使用mainAxisSize: MainAxisSize.max
如果.
Expanded
_Column
_GridView
删除此Expanded
小部件。
解决方案:
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min, // 1st use min not max
children: <Widget>[
Container(...),
GridView.builder(...), // 2nd remove Expanded
],
)
推荐阅读
- gcloud - 处理少量消息后未收到 Google PubSub ACK
- ruby-on-rails - Rails:哪个实例属于在控制器中定义的变量?
- github - Github Action:从另一个分支触发工作流
- python - 申请熊猫最快的方法
- css - 在 ng-template 上实现可滚动
- google-sheets - Google Sheets Text Join 将字符从列连接到行
- azure-traffic-manager - 流量管理器 - 此值既不是 IP 地址也不是完全限定域名 (FQDN)
- c# - Unity如何在全局范围内设置球体的半径?
- c# - 我可以直接下载 csv 文件而不使用 csvhelper 定义文件路径吗?
- junit - 由于在构造函数中调用函数然后创建该类的新对象,导致空指针异常