Flutter - 布局组件-1
2020-09-20 本文已影响0人
tp夕阳武士
1. Align
Center 就是继承于这个组件的
class Center extends Align {
/// Creates a widget that centers its child.
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}
Align
组件有一个alignment
属性,而Center居中比较常用,所以Center直接固定把alignment
设置为居中了.
alignment
还可以通过坐标参数设置Alignment(x,y)
,x和y的取值范围是[-1,1],如果超出这个区域,则会约过父组件的显示范围
2.Container
- Container可以设置宽高度
- Container 如果不设置
width
和height
则它的大小由它的child决定 - 可以设置背景:
color
,边框border
,外边距:margin
,内边距padding
class ContainerDemo extends StatelessWidget {
const ContainerDemo({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
//color 设置背景色
//这个属性和decoration 不可以同时设置
// color: Colors.red,
//设置对齐方式
// alignment: Alignment.bottomLeft,
//设置宽高
width: 200,
height: 200,
//设置外边距
// padding: EdgeInsets.only(left: 100, top: 100),
//设置外边距
margin: EdgeInsets.only(left: 100, top: 100),
//设置旋转
// transform:Matrix4.rotationZ(pi/2), //左上角作为中心点,沿着Z轴旋转
// transform:Matrix4.rotationX(pi/3), //上顶边作为中心轴旋转
// transform:Matrix4.rotationY(pi/4), //左边作为中心轴旋转
// transform:Transform.rotate(angle: pi/4),
decoration: BoxDecoration(
color: Colors.blue,
border: Border.symmetric(
vertical: BorderSide(
color: Colors.red, width: 2, style: BorderStyle.solid),
horizontal: BorderSide(
color: Colors.red, width: 2.0, style: BorderStyle.solid)),
image: DecorationImage(
image: AssetImage(
'assets/images/WechatIMG231.jpeg',
),
fit: BoxFit.cover,
),
// borderRadius:BorderRadius.circular(100),
borderRadius:BorderRadius.circular(100),
// boxShadow: //是一个阴影数组
),
child: Icon(
Icons.pets,
size: 30,
color: Colors.purple,
),
);
3.Padding
用来设置内边距的,就好像css
语法中的设置paading的作用是差不多的
class PaddingDemo extends StatelessWidget {
const PaddingDemo({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
children: [
Padding(
// Padding就是通过这个属性来设置child的内边距的
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
child: Text(
'你好啊,李银河!',
style: TextStyle(backgroundColor: Colors.red,fontSize: 30),
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
child: Text(
'你好啊,李银河!',
style: TextStyle(backgroundColor: Colors.red,fontSize: 30),
),
),
Padding(
padding: EdgeInsets.fromLTRB(20, 10, 20, 10),
child: Text(
'你好啊,李银河!',
style: TextStyle(backgroundColor: Colors.red,fontSize: 30),
),
),
]
);
}
}
image.png