推荐数据模块代码：

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, )   总结：   <style></style>

横向布局用列表加指示方向

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是父页面下的集合页面元素 

        )