（七）Flutter 布局 创建小部件 自定义view 关于布局的一些属性 mainAxis SizeBox Alignment stack AspectRatio ConstrainedBox
选自-----------------
flutter开发
主要内容
- 创建LayoutDemo小部件
- 创建可配置图标徽章IconBadege 小部件
- Row与Column
- mainAxis:主轴与crossAxis 交叉轴
- SizeBox 固定尺寸的盒子
- Alignment 对齐
- stack 一摞小部件
- AspectRatio 宽高比
- ConstrainedBox 带限制的盒子
关于前两个就不多做说明 又java基础的就能看懂 没有java基础的我讲了你也不懂 所以我就直接上代码了
flutter 的Row 和Column
就相当于
android 的orientation 属性 的horizontal 一行 与 vertical 一列
mainAxisAlignment 主轴的对齐方式
这个主轴 是相对于Cloumn 或者Row来说的
在Cloumn中 那么主轴就是垂直
在row 中 那么主轴就是水平
默认值是start
mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
//把空间分配的小控件的周围
mainAxisAlignment: MainAxisAlignment.spaceAround,
//把空间分配的小控件的之间
mainAxisAlignment: MainAxisAlignment.spaceBetween,
//把空间平均分配的小控件的之间
mainAxisAlignment: MainAxisAlignment.spaceEvenly,就是靠前显示
crossAxisAlignment 交叉轴的对齐方式
这个交叉轴 是相对于主轴的交叉出现的 他们有很多数值
在Cloumn中 因为主轴就是垂直 那么交叉轴就是水平
在row 中 因为主轴就是水平 那么交叉轴就是垂直
默认值是
crossAxisAlignment: CrossAxisAlignment.center,还有其他属性
//拉伸
crossAxisAlignment: CrossAxisAlignment.stretch,start end就不多讲了
上案列
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
IconBadge(Icons.pool),
IconBadge(Icons.beach_access,size: 64.0,),
IconBadge(Icons.airplanemode_active),
],
)
);
}
}
class IconBadge extends StatelessWidget{
final IconData icon;
final double size;
IconBadge(this.icon,{this.size=32.0});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Icon(icon,size:size,color: Colors.white),
width: size+60,
height: size+60,
color: Color.fromRGBO(3, 54, 255, 1.0),
);
}
} sizedBox 这个不仅仅可以设置空间的大小 还可以用来巧妙的设置成间距
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 200.0,
height: 300.0,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(Icons.ac_unit,color: Colors.white,size: 32.0,),
),
),
SizedBox(
height:20.0
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(Icons.brightness_2,color: Colors.white,size: 32.0,),
),
)
],
)
); alignment 对齐
语法
alignment: Alignment(1.0, 1.0),取值范围 -1~1
具体应用 就是相当于Android 相对布局中的AliginParent属性
对于控件的 android:layout_alignParent 属性，只有在该布局的父布局也是RelativeLayout是才有用，此属性的含义为将控件边缘与父控件的边缘对齐
android:layout_alignParentLeft="true" --将控件的左边缘和父控件的左边缘对齐
android:layout_alignParentTop="true" --将控件的上边缘和父控件的上边缘对齐
android:layout_alignParentRight="true" --将控件的右边缘和父控件的右边缘对齐
android:layout_alignParentBottom="true" --将控件的底边缘和父控件的底边缘对齐
android:layout_centerInParent="true" --将控件置于父控件的中心位置
android:layout_centerHorizontal="true" --将控件置于水平方向的中心位置
android:layout_centerVertical="true" --将控件置于垂直方向的中心位置
默认的位置就是0，0
实际应用如下 可以理解为child再SizeBox中的位置 左上是-1，-1 右下是1，1
这个样子的设计我还觉得挺新颖的
SizedBox(
width: 200.0,
height: 300.0,
child: Container(
alignment: Alignment(0.0, 0.0),
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(Icons.ac_unit,color: Colors.white,size: 32.0,),
),
),当然 Flutter作为后起之秀不是没有原因的，真的是细节做的很好 他为了少让你自己算0，-0.5 还是 -0.5 0，量身定制了api
alignment: Alignment.topCenter,我就不一一列举了 自己尝试把
Stack 相当于Android的相对布局
把一堆小空间叠加起来 直接上代码吧
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(children: [
SizedBox(
width: 200.0,
height: 300.0,
child: Container(
alignment: Alignment.topCenter,
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(Icons.ac_unit,color: Colors.white,size: 32.0,),
),
),
SizedBox(
height:20.0
),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
borderRadius: BorderRadius.circular(8.0),
),
child: Icon(Icons.brightness_2,color: Colors.white,size: 32.0,),
),
)
],)
],
)
);
}
}
class IconBadge extends StatelessWidget{
final IconData icon;
final double size;
IconBadge(this.icon,{this.size=32.0});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Icon(icon,size:size,color: Colors.white),
width: size+60,
height: size+60,
color: Color.fromRGBO(3, 54, 255, 1.0),
);
}
} Positioned 控制控件的位置
Positioned(
right: 20.0,
top: 120.0,
child: Icon(Icons.ac_unit,color: Colors.white,size: 16.0,),)
],)so 画一个星空图 有月亮还有星辰
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
alignment: Alignment.topLeft,
children: [
SizedBox(
width: 200.0,
height: 300.0,
child: Container(
alignment: Alignment.topCenter,
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
borderRadius: BorderRadius.circular(8.0),
),
),
),
SizedBox(height: 20.0),
SizedBox(
width: 100.0,
height: 100.0,
child: Container(
decoration: BoxDecoration(
color: Color.fromRGBO(3, 54, 255, 1.0),
shape: BoxShape.circle,
gradient: RadialGradient(colors: [
Color.fromRGBO(7, 102, 255, 1.0),
Color.fromRGBO(3, 54, 255, 1.0),
])),
child: Icon(
Icons.brightness_2,
color: Colors.white,
size: 32.0,
),
),
),
Positioned(
right: 20.0,
top: 120.0,
child: Icon(Icons.ac_unit, color: Colors.white, size: 20.0)
),
Positioned(
right: 70.0,
top: 180.0,
child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0)
),
Positioned(
right: 30.0,
top: 230.0,
child: Icon(Icons.ac_unit, color: Colors.white, size: 18.0)
),
Positioned(
right: 90.0,
top: 20.0,
child: Icon(Icons.ac_unit, color: Colors.white, size: 20.0)
),
Positioned(
right: 4.0,
top: -4.0,
child: Icon(Icons.ac_unit, color: Colors.white, size: 16.0)
),
],
)
],
));
}
}
class IconBadge extends StatelessWidget {
final IconData icon;
final double size;
IconBadge(this.icon, {this.size = 32.0});
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
child: Icon(icon, size: size, color: Colors.white),
width: size + 60,
height: size + 60,
color: Color.fromRGBO(3, 54, 255, 1.0),
);
}
}
AspectRatio 来制造宽高比的容器
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AspectRatio(
aspectRatio:1.0/1.0 ,
child: Container(
color: Color.fromRGBO(3, 54, 255, 1.0),
),
),
],
)
);
}
} 其中 aspectRatio:1.0/1.0 ,
就是说1比上1 也可以改成16/9 3/2等值进行测试
ConstrainedBox 带限制的盒子
可以设置最小高度和最大高度等参数
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [ConstrainedBox(
constraints: BoxConstraints(
minHeight: 200.0,
maxWidth: 200.0
),
child: Container(
color: Color.fromRGBO(3, 54, 255, 1.0),
),
)],
));
}
}