warp 流式布局
Posted pp-pping
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了warp 流式布局相关的知识，希望对你有一定的参考价值。
代码：
import ‘package:flutter/material.dart‘;
class WarpDemo extends StatefulWidget {
WarpDemo({Key key}) : super(key: key);
@override
_WarpDemoState createState() => _WarpDemoState();
}
class _WarpDemoState extends State<WarpDemo> {
List<Widget> demoList;
@override
void initState() {
super.initState();
demoList = List<Widget>()..add(buildAddButton());//初始化
}
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;//屏幕宽
final height = MediaQuery.of(context).size.height;//屏幕高
return Scaffold(
appBar: AppBar(
title: Text(‘流式布局‘),
),
body: Center(
child: Opacity(opacity: 0.8,child:Container(
width: width,
height: height/2,
color: Colors.grey,
child: Wrap(
children: demoList,
spacing: 26.0,//间距
),
),),//透明
),
);
}
Widget buildAddButton(){//也算是方法其实我更觉得是个全局变量 返回widget的方法
return GestureDetector(//手势识别
onTap: (){
if (demoList.length < 9) {
setState(() {//
demoList.insert(demoList.length - 1, buildPhoto());//在demoList.length - 1 插入元素buildPhoto() //集合改变 在这里
});
}
},
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 80.0,
height: 80.0,
color: Colors.greenAccent,
child: Icon(Icons.add),
),
),
);
}
Widget buildPhoto (){
return Padding(
padding: const EdgeInsets.all(10.0),
child: Container(
width: 80.0,
height: 80.0,
color: Colors.orange,
child: Center(
child: Text(‘照片‘),
),
),
);
}
}
总结：
//wrap 流式布局
Wrap(
children:xx,//xx 数据集合
)
xx.inser(index,value)//xx 数据集合， index 在第index个位置 添加数据为value，这个和OC 不一样，flutter inser语法是先修改元素后扩充集合。
padding(//？？？？还不明白这个是不是类似于View 如果是 那和 Contain啥区别
)
以上是关于warp 流式布局的主要内容，如果未能解决你的问题，请参考以下文章
Java AWT 图形界面编程LayoutManager 布局管理器 ② ( FlowLayout 流式布局 )