Flutter之Expanded和Flexible特性

首先我们先看看Expanded的特性：

Expanded强制子组件填充可用空间。下面看看效果：

给界面画布局边界是通过debugPaintSizeEnabled属性来进行控制的。

设置debugPaintSizeEnabled为true来更直观的调试布局问题

第一步:先导入rendering.dart

import 'package:flutter/rendering.dart';

第二步：设置main入口

void main() {
//设置debugPaintSizeEnabled为true来更直观的调试布局问题 debugPaintSizeEnabled=true;
runApp(new MyApp());
}

第三步：创建一个无状态小部件

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
//程序默认显示的小部件,通过脚手架进行包装 home: new Scaffold(
appBar: new AppBar(
//toolbar title title: new Text('测试Expanded特性'),
),
body: testExpanded(),
),
);
}
}

第四步：创建一个无状态小部件

///测试Expanded特性 Widget testExpanded(){
return new Container(
//先设置容器的边距 padding: const EdgeInsets.all(32.0),
//测试先设置无穷大 infinity = ∞ height: double.infinity,
child: new Row(
//使用水平布局Row控件让子控件水平排列,点击Row看有哪些属性可以使用 children: <Widget>[
new Container(
//设置第一个子控件的宽度是150像素 width: 150.0,
child: new Text("我是普通容器包裹的。"),
),
//Expanded强制子组件填充可用空间 new Expanded(child: new Container(
//加宽度是为了证明,Expanded不受这个宽度约束,强制子组件填充可用空间 width: 20.0,
child: new Text(
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
"Expanded包裹的子组件"
)
)),
],
),
);
}

最后运行起来就是我们最上面的截图效果，通过开启调试布局，我们能够更加直观的看到Expanded的特性。

最后别忘了导入基础包material.dart:

import 'package:flutter/material.dart';

Flexible特性：让子组件有填充可用空间的能力

下面我们把上面的代码中Expanded的地方的改成Flexible，我们看看运行之后的效果：

可用看出，Flexible和Expanded是相反的。