添加横纵布局 和 页面保活
Posted pp-pping
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了添加横纵布局 和 页面保活相关的知识，希望对你有一定的参考价值。
推荐数据模块代码：
import ‘package:flutter/material.dart‘;
import ‘package:flutter_screenutil/flutter_screenutil.dart‘;
class Recomend extends StatelessWidget {
final List recommendList;
const Recomend({Key key,this.recommendList}) : super(key: key);
//标题
Widget _titleWidget(){
return Container(
alignment: Alignment.centerLeft,//居中靠左
padding: EdgeInsets.fromLTRB(10.0, 2.0, 0, 5.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
bottom: BorderSide(width: 0.5,color: Colors.black)
)
),
child: Text(
‘商品推荐‘,
style: TextStyle(color: Colors.pink),
),
);
}
//单个元素
Widget _item(index){
return InkWell(
onTap: (){
},
child: Container(
height: ScreenUtil().setHeight(330),
width: ScreenUtil().setWidth(250),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
border: Border(
left: BorderSide(width: 0.5,color: Colors.grey)//左边界
)
),
child: Column(
children: <Widget>[
Image.network(recommendList[index][‘image‘]),
Text(‘￥ ${recommendList[index][‘mallPrice‘]}‘),
Text(‘￥ ${recommendList[index][‘price‘]}‘,style: TextStyle(decoration: TextDecoration.lineThrough,color: Colors.grey)),//删除线
],
),
),
);
}
//横向列表
Widget _recommendDataList(){
return Container(
height: ScreenUtil().setHeight(330),
child: ListView.builder(
scrollDirection: Axis.horizontal,//横向
itemCount: recommendList.length,
itemBuilder: (context,index){
return _item(index);
},
),
);
}
@override
Widget build(BuildContext context) {
return Container(
height: ScreenUtil().setHeight(380.0),
margin: EdgeInsets.only(top: 10.0),//外间距
child: Column(
children: <Widget>[
_titleWidget(),//标题
_recommendDataList()//横向列表
],
),
);
}
}
页面保活代码：
class _HomePageState extends State<HomePage> with AutomaticKeepAliveClientMixin {//with 混入 AutomaticKeepAliveClientMixin保活 1.需要这个类继承 StatefulWidget 2.重写wantKeepAlive 并置为true 3.在此文件的父页面使用IndexedStack
@override
bool get wantKeepAlive => true;//保持页面效果 就是返回当前页面不重新加载
@override
void initState() {
super.initState();
print(‘11111‘);//不保活 就会重新加载 就会调用这个方法
}
body: IndexedStack(
index: currentIndex,
children: tabs,
)
总结：
横向布局用列表加指示方向
ListView.builder(
scrollDirection:Axis.horizontal,//横向
itemBuilder:(context,index){
return xxx;//控件
}
)
纵向布局用column
Column(
children:<widget>[
]
)
边框使用decoration
decoration:BoxDecoration(
border:Border(
top:BorderSide(width:xx,corlor:)//多粗 ，颜色
left:
right:
bottom:
)
)
padding 内间距
margin 外间距
保持页面活性——切换到其他页面，原来的页面不重新加载
需要混入with AutomaticKeepAliveClientMixin
但是还需要3个条件来满足
1.需要这个类继承 StatefulWidget 2.重写wantKeepAlive 并置为true 3.在此文件的父页面使用IndexedStack
例如 父页面
body: IndexedStack(
index: currentIndex,
children: xxx,xxx是父页面下的集合页面元素
)
以上是关于添加横纵布局 和 页面保活的主要内容，如果未能解决你的问题，请参考以下文章