我有一个由Table
个小部件组成的AspectRatio
。
这个Table
位于Column
中,里面有另一个小部件,例如Text
。
然后,我使用Table
小部件及其Text
参数在Expanded
和flex
之间分配空间。
Table
始终会填满屏幕宽度,即使它没有足够的垂直空间,因此也会被Column
中的第二个小部件剪裁。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body: MyHomePage()),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Expanded(
flex: 1,
child: MyTable()
),
Expanded(
flex: 2,
child: Container(
color: Colors.green,
),
)
],
);
}
}
class MyTable extends StatelessWidget {
const MyTable({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
var cell = AspectRatio(
aspectRatio: 1.0,
child: Container(),
);
var row = TableRow(children: [
cell,
cell,
cell,
]);
return Table(
border: TableBorder.all(width: 4),
children: [
row,
row,
row,
],
);
}
}
查看结果“ https://imgur.com/a/rxx5IcN”