测试demo场景:
要求:
1.将布局平分3等分
2.点击单个部件进行放大部件(及全屏)
图片:
代码:
class _EachViewState extends State<EachView> {
List<entity> _list;
@override
void initState() {
// TODO: implement initState
super.initState();
_list = List();
_init();
}
@override
Widget build(BuildContext context) {
return Scaffold(
// 标题
appBar: AppBar(title: Text(widget._title)),
//主题内容 居中
body: Row(
children: <Widget>[
Expanded( // 权重
flex: _list[0].flexSize, // 设置比例参数
child: getWidget(Colors.deepOrange, 1, _list[0].isHide)
),
Expanded(
flex: _list[1].flexSize,
child: getWidget(Colors.greenAccent, 2, _list[1].isHide)
),
Expanded(
flex: _list[2].flexSize,
child: getWidget(Colors.amberAccent, 3, _list[2].isHide)
),
],
)
);
}
Widget getWidget(Color c, int code, bool isShow){
return Offstage( // 用于部件隐藏
offstage: isShow, // 隐藏参数设置
child:Container(
color: c,
height: 120,
child: MaterialButton( // 按钮
onPressed: (){
if(code == 1){
print("1111");
setState(() {
if(_list[0].enlarge){
_init();
}else{
_change(0);
}
});
}
if(code == 2){
print("2222");
setState(() {
if(_list[1].enlarge){
_init();
}else{
_change(1);
}
});
}
if(code == 3){
print("3333");
setState(() {
if(_list[2].enlarge){
_init();
}else{
_change(2);
}
});
}
}
),
),
);
}
_init(){
_list.clear();
_list
..add(entity(1, 120, false, false))
..add(entity(1, 120, false, false))
..add(entity(1, 120, false, false));
}
_change(int code){
for(int i = 0; i < _list.length; i++){
if(code == i){
_list[i].flexSize = 1; // 设置比重
_list[i].isHide = false; // 隐藏按钮
_list[i].enlarge = true; // 放大
}else{
_list[i].flexSize = 0; //设置比重为0
_list[i].isHide = true; // 隐藏按钮
_list[i].enlarge = false; // 不处理
}
}
}
注意:
1. Container 布局 没有点击事件,所以在布局中加入了MaterialButton,用来测试点击事件
2.通过Expanded 权重设置来平分的3个 Container 布局, 这种情况下,可以通过Expanded的属性 flex = 0 来设置当前布局的宽为0,既,权重设置为 1:0:0 ,这样结果是 第一个Container 放大(全屏),其他Container看不部件。
3.如果Container中添加了一个自带size的布局,如MaterialButton, 安照 注意第二项设置全重,是无法实现全屏效果,需要先将MaterialButton 使用Offstage 进行隐藏后,在设置权重即可实现全屏。
测试demo: https://download.csdn.net/download/m0_37039192/11441404