flutter - 有没有办法根据 Flutter 中的可用空间自动调整 Table 小部件的行高?
问题描述
我一直在尝试使用 Table 小部件在 Flutter 中创建一个表格,并将其展开到屏幕底部,而无需滚动查看整个表格。但是,似乎 Text 小部件强制行具有特定高度,导致最后一行溢出。
一个有趣的旁注是,表格所在的扩展小部件不会溢出屏幕,因此即使表格溢出扩展小部件,也不会显示错误消息。相反,看起来表格在 Expanded 小部件中溢出。
示例代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter table example',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter table example'),
),
body: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child: Image.network('https://imgs.xkcd.com/comics/minifigs.png'),
),
Expanded(
child: Container(
padding: const EdgeInsets.all(6.0),
child: Table(
columnWidths: {
0: FlexColumnWidth(1),
1: FlexColumnWidth(2),
2: FlexColumnWidth(2),
},
border: TableBorder(
horizontalInside: new BorderSide(color: Colors.grey[300], width: 1)
),
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children:
List<TableRow>.generate(10, (int i){
return TableRow(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
(1990 + i).toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Normal people',
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Lego people',
textAlign: TextAlign.center,
),
),
]
);
}),
),
),
)
],
),
),
);
}
}
和输出:
解决方案
希望这可以帮助
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter table example',
home: Scaffold(
appBar: AppBar(
title: Text('Flutter table example'),
),
body: Container(
child: ListView(
shrinkWrap:true,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(4.0),
child:
Image.network('https://imgs.xkcd.com/comics/minifigs.png'),
),
Container(
padding: const EdgeInsets.all(6.0),
child: Table(
columnWidths: {
0: FlexColumnWidth(1),
1: FlexColumnWidth(2),
2: FlexColumnWidth(2),
},
border: TableBorder(
horizontalInside:
new BorderSide(color: Colors.grey[300], width: 1)),
defaultVerticalAlignment: TableCellVerticalAlignment.middle,
children: List<TableRow>.generate(20, (int i) {
return TableRow(children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
(1990 + i).toString(),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Normal people',
textAlign: TextAlign.center,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'Lego people',
textAlign: TextAlign.center,
),
),
]);
}),
),
),
],
),
),
),
);
}
}
推荐阅读
- r - 如何从多个目录中读取数据集并合并R中每个目录中的所有数据集?
- mysql - SQL Server“在链接服务器上插入执行”有时会影响 0 行
- javascript - 将 FormData 发送到 PHP 文件未按预期工作
- rgb - 使用 python 将 Tif 文件转换为 RGB(png/jpg)
- python - 从没有标题 Python 3.8 的 Dataframe 列(28k 行)中删除括号和逗号
- amazon-web-services - EC2 无法检索平台,因为 AMI 已被删除或设为私有
- javascript - 使用 fetch for telegram bot 回到 API 调用中
- kubernetes - EKS 入口控制器创建没有看到标记的子网?
- bash - crontab 上的脚本未执行但可以自行执行
- django - 如何在 Django 中获取关注我的用户数量