Expanded
使用与类似与Column,Row,Flex等展示多个组件集合的组件,Expanded包含的组件可以占据剩余的空间。
在一个Row组件里面展示3个Container组件,固定了后两个组件的宽高,第一个组件就撑满屏幕,占据
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(// Expanded包一下,可以撑满剩余空间
child: Container(
color: Colors.amber,
height: 100,
),
),
Container(
width: 50,
height: 100,
color: Colors.red,
),
Container(
width: 50,
height: 100,
color: Colors.cyan,
)
],
),
case1
屏幕左边是文字,最右边是一个按钮,文字数据是服务器数据返回的,且多行显示。
String _title = '这里的文字是动态的展示多行的数据,Expanded可以包裹左边的Text组件,右边的btn控制大小';
class _Test extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Expanded(child: Text('$_title')),
SizedBox(
width: 10,
),
Container(
width: 60,
height: 60,
child: RaisedButton(
onPressed: () {},
child: Text('订购'),
),
),
],
),
);
}
}
case2:按比例分割屏幕空间
举例:1:2:1
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Container(
height: 40,
color: Colors.amber,
child: Text('amber'),
),
),Expanded(
flex: 2,
child: Container(
height: 40,
color: Colors.red,
child: Text('red'),
),
), Expanded(
flex: 1,
child: Container(
height: 40,
color: Colors.cyan,
child: Text('cyan'),
),
),
],
);