宽度适配设置：
width: MediaQuery.of(context).size.width/2-10, //获得宽度平分两份减去边距
width: MediaQuery.of(context).size.height/2-10,//获得高度平分两份减去边距
1.设置渐变 边框圆角 颜色
Color hotelstartColor =Color(int.parse("0xff" +homeModelGridNav.hotel.startColor));
Color hotelendColor =Color(int.parse("0xff" +homeModelGridNav.hotel.endColor));
decoration:BoxDecoration(
gradient://设置渐变
LinearGradient(
colors: [hotelstartColor, hotelendColor],
//渐变从左到右
begin: Alignment.centerLeft,end: Alignment.centerRight
),
//设置边框圆角
borderRadius:BorderRadius.only(
topRight:Radius.circular(5),
topLeft:Radius.circular(5),
)),
2.Row 左右布局显示
方法一：
Widget_items() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding:EdgeInsets.only(left:10),
child:Image.network(
salesBox.icon,
height:20,
),
),
Container(
padding:EdgeInsets.only(right:10),
child:Image.network(
salesBox.icon,
height:20,
),
),
],
);
}
方法二：
Widget_items() {
return Row(
children: [
Expanded(//等分平分布局
child:
Container(
alignment: Alignment.centerLeft,//显示控件左边显示
padding:EdgeInsets.only(left:10),
child:Image.network(
salesBox.icon,
height:20,
),
),
),
Expanded(
child:
Container(
alignment: Alignment.centerRight, //设置控件右边显示
padding:EdgeInsets.only(right:10),
child:Image.network(
salesBox.icon,
height:20,
),
),
),
],
);
}
3.GridView.builder 常用属性
Widget_items() {
return GridView.builder(
//Flutter 中的GridView禁止用户上下滑动可以使用physics属性
physics:const NeverScrollableScrollPhysics(),
itemCount:subNavList.length,
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
childAspectRatio:1.2, //宽高比为1:2
crossAxisCount:5, //每行三列
// mainAxisSpacing: 5,
// crossAxisSpacing: 5,
),
itemBuilder: (BuildContext context, int position) {
return _item(context,position);
});
}
4.进度条设置
return Center(
child: Opacity( //透明度设置
opacity: 0.5,
child:Container(
color: Colors.black87,
width: MediaQuery.of(context).size.width,
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(//进度条自定义
//定义一个背景颜色
backgroundColor: Colors.deepPurple,
//定义进度条宽度
strokeWidth:4.0,
//进度条颜色
valueColor:new AlwaysStoppedAnimation(Colors.red),
),
Text("加载中..."),
],
),
),
),
);
网友评论