0001.jpg
項目git地址:flower_gift
接著把首頁寫完
效果:
3666.gif
第一個單列ListView
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../model/homePage_model_entity.dart';
import 'package:provide/provide.dart';
import '../../provide/homePage_provide.dart';
class HomeFlowerSingleList extends StatelessWidget {
final int sectionIndex;
HomeFlowerSingleList(this.sectionIndex);
@override
Widget build(BuildContext context) {
return Provide<HomePageProvide>(
builder: (context,child,val){
var sectionData;
if(sectionIndex == 1){
sectionData = val.homePageModelEntity.section1;
}else{
sectionData = val.homePageModelEntity.section2;
}
return Container(
color: Color.fromRGBO(240, 240, 245, 1.0),
child: Column(
children: <Widget>[
_titleWidget(sectionData),
SizedBox(height: 10.0,),
_listView(sectionData,context),
_moreBtnWidget(sectionData)
],
)
);
}
);
}
//標題
Widget _titleWidget(HomePageModelSection sectionData){
return Container(
color:Colors.white,
margin: EdgeInsets.only(top: 10.0),
height: ScreenUtil().setHeight(80.0),
alignment: Alignment.center,
child: Text(
sectionData.title,
style: TextStyle(
fontSize: ScreenUtil().setSp(30.0),
fontWeight: FontWeight.w600
),
),
);
}
//查看更多按鈕
Widget _moreBtnWidget(HomePageModelSection sectionData){
return Container(
color:Colors.white,
height: ScreenUtil().setHeight(100.0),
alignment: Alignment.center,
child: RaisedButton(
onPressed: (){
print("查看更多...");
},
child: Text("查看更多"),
)
);
}
//listView
Widget _listView(HomePageModelSection sectionData,BuildContext context){
return Padding(
padding: const EdgeInsets.only(left: 5.0,right: 5.0),
child: Container(
color:Color.fromRGBO(240, 240, 245, 1.0),
child:Container(
color: Colors.white,
child: Column(
children:_listViewLists(sectionData,context)
) ,
)
),
);
}
List<Widget> _listViewLists(HomePageModelSection sectionData,BuildContext context){
List<Widget> list = new List();
for(var i = 0; i < sectionData.xList.length; i++){
list.add(
_listItem(sectionData.xList[i],context)
);
}
return list;
}
Widget _listItem(HomePageModelSectionList sectionListItem,BuildContext context){
return Container(
decoration: BoxDecoration(
border: Border(bottom: BorderSide(width: 0.5,color: Colors.black26))
),
child: Padding(
padding: const EdgeInsets.only(top: 10.0,bottom: 15.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(width: 10.0,),
//左邊圖片
Container(
height: MediaQuery.of(context).size.width / 3 + 30.0,
width: MediaQuery.of(context).size.width / 3 + 10.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Image.network(sectionListItem.image,fit: BoxFit.cover,),
)
),
SizedBox(width: 25.0,),
//右邊文字
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
//標題
Text(sectionListItem.title,
textAlign: TextAlign.left,
style:TextStyle(fontSize: ScreenUtil().setSp(40.0),
fontWeight: FontWeight.w300,
)
),
SizedBox(height: 10.0,),
//詳情
Container(
width: MediaQuery.of(context).size.width/2 - 20.0,
child: Text(sectionListItem.detail,
maxLines:2,
overflow:TextOverflow.ellipsis
),
),
SizedBox(height: 10.0,),
//評語
Container(
width: MediaQuery.of(context).size.width/2 - 20.0,
padding: const EdgeInsets.symmetric(vertical: 10.0),
decoration: BoxDecoration(
//只添加上下邊框
border: Border(top: BorderSide(width: 0.5,color: Colors.black26),bottom: BorderSide(width: 0.5,color: Colors.black26))
),
child: Text(sectionListItem.info,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.w600),
),
),
SizedBox(height: 10.0,),
//價格：
Row(
children: <Widget>[
Text("￥${sectionListItem.price}",
style: TextStyle(color: Colors.orange,fontSize: ScreenUtil().setSp(36.0)),
),
SizedBox(width: 10.0,),
Text("￥${sectionListItem.linePrice}",
style: TextStyle(
color: Colors.black26,
decoration: TextDecoration.lineThrough
),
),
],
),
SizedBox(height: 10.0,),
//銷量和購物車
Container(
width: MediaQuery.of(context).size.width/2,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text("已銷售${sectionListItem.salesRank}件",
style: TextStyle(
color: Colors.black12,
),
),
InkWell(
onTap: (){
print("點擊加入購物車");
},
child:Icon(Icons.shopping_cart)
)
],
),
)
],
),
)
],
),
),
);
}
//左邊圖片
Widget _leftImage(HomePageModelSectionList sectionListItem){
return ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Container(
width: 100.0,
child: Image.network(sectionListItem.image,
fit: BoxFit.cover,
),
),
);
}
//右邊文字布局
Widget _rightText(HomePageModelSectionList sectionListItem){
return Container(
padding: EdgeInsets.only(left: 30.0,right: 20.0,top: 10.0),
width: ScreenUtil().setWidth(400.0),
child: AspectRatio(
aspectRatio: 0.9,
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
child:Text(sectionListItem.title,
textAlign: TextAlign.left,
style:TextStyle(fontSize: ScreenUtil().setSp(36.0),
fontWeight: FontWeight.w300,
)
),
),
Container(
margin: EdgeInsets.only(top: 15.0),
child: Text(sectionListItem.detail,
maxLines:2,
overflow:TextOverflow.ellipsis
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
padding: EdgeInsets.only(top: 12.0,bottom: 12.0),
decoration: BoxDecoration(
//只添加上下邊框
border: Border(top: BorderSide(width: 0.5,color: Colors.black26),bottom: BorderSide(width: 0.5,color: Colors.black26))
),
alignment: Alignment.centerLeft,
child: Text(sectionListItem.info,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.w600),
),
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Row(
children: <Widget>[
Text("￥${sectionListItem.price}",
style: TextStyle(color: Colors.orange,fontSize: ScreenUtil().setSp(35.0)),
),
Container(
margin: EdgeInsets.only(left: 10.0),
child: Text("￥${sectionListItem.linePrice}",
style: TextStyle(
color: Colors.black26,
decoration: TextDecoration.lineThrough
),
) ,
),
],
),
),
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(top: 10.0),
child: Text("已銷售${sectionListItem.salesRank}件",
style: TextStyle(
color: Colors.black12,
fontSize: ScreenUtil().setSp(22.0)
),
),
)
],
),
)
);
}
}
這種單列ListView,然后又分為左右兩部分的情況，注意這個布局方式就好，我的思路是左邊圖片我就讓它寬度為屏幕的一半(去掉間隔)，高度就為寬度的1.2倍左右。 再有就是右邊文字布局，這種就只需要給Container限定寬度，然后Column單列布局下來，就讓其中的widget自動將這個這個ListViewItem高度撐起來。比以前iOS中用這個xib做布局，要簡單些。
第二個雙列ListView
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import '../../model/homePage_model_entity.dart';
import 'package:provide/provide.dart';
import '../../provide/homePage_provide.dart';
class HomeFlowerDoubleList extends StatelessWidget {
final int sectionIndex;
HomeFlowerDoubleList(this.sectionIndex);
@override
Widget build(BuildContext context) {
return Provide<HomePageProvide>(
builder: (context,child,val){
var sectionData;
if(sectionIndex == 3){
sectionData = val.homePageModelEntity.section3;
}else if(sectionIndex == 4){
sectionData = val.homePageModelEntity.section4;
}else if(sectionIndex == 5){
sectionData = val.homePageModelEntity.section5;
}else{
sectionData = val.homePageModelEntity.section6;
}
return Container(
color: Color.fromRGBO(240, 240, 245, 1.0),
child: Column(
children: <Widget>[
_titleWidget(sectionData),
_listView(sectionData),
_moreBtnWidget(sectionData)
],
)
);
}
);
}
//標題
Widget _titleWidget(HomePageModelSection sectionData){
return Container(
color:Colors.white,
margin: EdgeInsets.only(top: 10.0),
height: ScreenUtil().setHeight(80.0),
alignment: Alignment.center,
child: Text(
sectionData.title,
style: TextStyle(
fontSize: ScreenUtil().setSp(30.0),
fontWeight: FontWeight.w600
),
),
);
}
//查看更多按鈕
Widget _moreBtnWidget(HomePageModelSection sectionData){
return Container(
color:Colors.white,
margin: EdgeInsets.only(top: 10.0),
height: ScreenUtil().setHeight(100.0),
alignment: Alignment.center,
child: RaisedButton(
onPressed: (){
print("查看更多...");
},
child: Text("查看更多"),
)
);
}
//listView
Widget _listView(HomePageModelSection sectionData){
return Container(
color:Color.fromRGBO(240, 240, 245, 1.0),
child: Wrap(
children:_listViewLists(sectionData)
)
);
}
List<Widget> _listViewLists(HomePageModelSection sectionData){
List<Widget> list = new List();
for(var i = 0; i < sectionData.xList.length; i++){
list.add(
_listItem(sectionData.xList[i])
);
}
return list;
}
Widget _listItem(HomePageModelSectionList sectionListItem){
return InkWell(
onTap: (){
print("點擊了列表Item");
},
child: Container(
color: Colors.white,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(top: 5.0),
height: ScreenUtil().setHeight(600.0),
child: Column(
children: <Widget>[
_topImage(sectionListItem),
Stack(
alignment: const FractionalOffset(1, 1),
children: <Widget>[
_bottomText(sectionListItem),
InkWell(
onTap: (){
print("點擊加入購物車");
},
child:Icon(Icons.shopping_cart)
)
],
)
],
),
)
);
}
//左邊圖片
Widget _topImage(HomePageModelSectionList sectionListItem){
return ClipRRect(
borderRadius: BorderRadius.circular(8.0),
child: Container(
width: ScreenUtil().setWidth(330),
child: Image.network(sectionListItem.image,
fit: BoxFit.fitWidth,
width: ScreenUtil().setWidth(330),
),
),
);
}
//右邊文字布局
Widget _bottomText(HomePageModelSectionList sectionListItem){
bool isShowLabel;
isShowLabel = sectionListItem.label.length > 0 ? true : false;
return Container(
// padding: EdgeInsets.only(left: 30.0,right: 20.0,top: 10.0),
width: ScreenUtil().setWidth(330.0),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 5.0),
alignment: Alignment.centerLeft,
child:Text(sectionListItem.detail,
textAlign: TextAlign.left,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style:TextStyle(fontSize: ScreenUtil().setSp(28.0),
fontWeight: FontWeight.w300,
)
),
),
//是否顯示小標簽
isShowLabel ? ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Container(
padding: EdgeInsets.all(5.0),
alignment: Alignment.center,
width: ScreenUtil().setWidth(160.0),
height: ScreenUtil().setHeight(50.0),
margin: EdgeInsets.only(top: 10.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.orange,width: 1.0)
),
child: Text(sectionListItem.label.first,
style: TextStyle(color: Colors.orange,fontSize: ScreenUtil().setSp(22.0)),
),
) ,
)
: Container(
height: ScreenUtil().setHeight(5.0),
color: Colors.white,
),
Container(
margin: EdgeInsets.only(top: 10.0),
child: Row(
children: <Widget>[
Text("￥${sectionListItem.price}",
style: TextStyle(color: Colors.orange,fontSize: ScreenUtil().setSp(35.0)),
),
Container(
margin: EdgeInsets.only(left: 10.0),
child: Text("￥${sectionListItem.linePrice}",
style: TextStyle(
color: Colors.black26,
decoration: TextDecoration.lineThrough
),
) ,
),
],
),
),
Container(
alignment: Alignment.centerLeft,
margin: EdgeInsets.only(top: 10.0),
child: Text("已銷售${sectionListItem.salesRank}件",
style: TextStyle(
color: Colors.black12,
fontSize: ScreenUtil().setSp(22.0)
),
),
)
],
),
);
}
}
這就沒什么好說的了，Row加入到ListView中就好了。
