Flutter布局的时候基本都使用行和列,基本都是按照相同比列进行排列显示的.如果想让其中一个拉伸并填充余下的空间,只需要在子控件外加上Expanded即可.
设置fix可以增加子控件的权重.
import 'package:flutter/material.dart';
class GoogleExpand extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
width: 50.0,
height: 50.0,
color: Colors.green,
),
Expanded(
flex: 1,
child: Container(
width: 50.0,
height: 50.0,
color: Colors.red,
child: Text('flex: 1'),
),
),
Container(
width: 50.0,
height: 50.0,
color: Colors.orange,
),
],
),
SizedBox(
height: 20.0,
),
Row(
children: <Widget>[
Container(
width: 50.0,
height: 50.0,
color: Colors.green,
),
Expanded(
flex: 2,
child: Container(
width: 50.0,
height: 50.0,
color: Colors.red,
child: Text('flex: 2'),
),
),
Container(
width: 50.0,
height: 50.0,
color: Colors.orange,
),
Expanded(
flex: 1,
child: Container(
width: 50.0,
height: 50.0,
color: Colors.blue,
child: Text('flex: 1'),
),
),
],
)
],
);
}
}