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 流式布局 )

Java AWT 图形界面编程LayoutManager 布局管理器 ② ( FlowLayout 流式布局 )

移动布局之流式布局

静态布局流式布局自适应布局弹性布局响应式布局

手机移动端技术选型之流式布局

移动端Web开发 流式布局flex布局rem布局