flutter学习笔记：布局开发

布局相关组件：

---

---

一、各基础组件的作用及运用

SingleChildRenderObjectWidget（单节点布局组件）

// Padding
设置布局内边距
// Opacity
通常用来改变透明度
// ClipRRect
将布局裁剪成方形

Padding(//填充
padding: EdgeInsets.all(10),//padding设置内边距
child: ClipRRect(//剪裁成方形
//圆角
borderRadius:BorderRadius.all(Radius.circular(10)),
child: Opacity(
opacity: 0.6,//60%的透明度
child: Image.network(
'https://pic.netbian.com/uploads/allimg/220409/000014-1649433614c50f.jpg',
width: 100,
height: 100,
),
),
),
)

// ClipOval
将布局裁剪成圆形
// SizedBox
用来约束布局大小

ClipOval(//剪裁成圆形
child: SizedBox(//设置尺寸
width: 100,
height: 100,
child: Image.network('https://pic.netbian.com/uploads/allimg/220408/005316-16493503969696.jpg'),
),
)

// PhysicalModel
用来将布局显示成不同形状的组件

PhysicalModel(//PhysicalModel ，主要的功能就是设置widget四边圆角，可以设置阴影颜色，和z轴高度
color: Colors.transparent,
borderRadius: BorderRadius.circular(6),
clipBehavior: Clip.antiAlias,//抗锯齿
child: PageView(
children: <Widget>[
_item('page1',Colors.deepPurple),
_item('page2',Colors.green),
_item('page3',Colors.red)
],
),
)

//Align Center
设置居中

alignment: Alignment.center,//alignment设置居中方式

//FractionallySizedBox
用来约束布局水平/垂直方向的伸展、扩张

FractionallySizedBox(//页面布局之百分百布局FractionallySizedBox,
widthFactor: 1,//值为（0.1）
child: Container(
decoration:
BoxDecoration(color: Colors.greenAccent),
child: Text('宽度撑满'),
),
)

MultiChildRenderObjectWidget（多节点布局组件）

//Stack
其作用是堆叠子组件,用来存放多节点布局

Stack(
// 将两个图片一大一小重叠
children: [
Image.network('https://pic.netbian.com/uploads/allimg/210317/001935-1615911575642b.jpg',
width:100,
height:100,
),
Positioned(
left: 0,
bottom: 0,
child:
Image.network('https://pic.netbian.com/uploads/allimg/210317/001935-1615911575642b.jpg',
width:36,
height:36,
),)
],
)

//Wrap
流式布局组件Wrap

Wrap(
//创建一个Wrap布局，从左向右进行排列，会自动