flutter实战项目06 项目中的一些排版布局

代码示例
分类主要组件GridView

class TopNavigator extends StatelessWidget{
  final List navGavigator;
  TopNavigator({Key key,this.navGavigator}):super(key:key);

  Widget _gridViewItemUI(BuildContext context,item,index){
    return InkWell(
      onTap: (){
        //跳转到分类页面
      },
      child: Column(
        children: <Widget>[
          Image.network(item["image"],width: ScreenUtil().setWidth(95)),
          Text(item["firstCategoryName"])
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context){
    if(navGavigator.length > 12){
      navGavigator.removeRange(12, navGavigator.length);
    }
    var temIndex = 1;
    return Container(
      color: Colors.white,
      margin: EdgeInsets.only(top: 5.0),
      padding: EdgeInsets.all(3.0),
      height: ScreenUtil().setHeight(280),
      child: GridView.count(
        //禁止滚动
        physics: NeverScrollableScrollPhysics(),
        crossAxisCount: 6,
        padding: EdgeInsets.only(top: 2.0),
        children: navGavigator.map((item){
          temIndex++;
          return _gridViewItemUI(context,item, temIndex);
        }).toList(),
      ),
    );
  }
}

推荐主要组件ListView

class ProductsFeatured extends StatelessWidget{
  final List recommendList;
  ProductsFeatured({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.grey)
          )
        ),
        child: Text(
          "商品推荐",
          style:TextStyle(color:Colors.blueGrey)
        ),
      );
  }

  Widget _productList(BuildContext context){
    return Container(
      height: ScreenUtil().setHeight(300),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: recommendList.length,
        itemBuilder: (context,index){
          return this._item(index, context);
        },
      ),
    );
  }

  Widget _item(index, context){
    return InkWell(
      onTap: (){},
      child: Container(
        width: ScreenUtil().setWidth(280),
        padding: EdgeInsets.all(8.0),
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border(
            left: BorderSide(width: 0.5,color: Colors.blueGrey)
          )
        ),
        child: Column(
          children: <Widget>[
            //防止溢出
            Expanded(
              child: Image.network(recommendList[index]["image"]),
            ),
            Text(
              "\$${recommendList[index]['presentPrice']}",
              style: TextStyle(
                color: Colors.blueGrey
              ),
            ),
            Text(
              "\$${recommendList[index]['oriPrice']}",
              style: KeyFont.oriPriceStyle
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context){
    return Container(
      margin: EdgeInsets.only(top:10.0),
      child: Column(
        children: <Widget>[
          _titleWidget(),
          _productList(context)
        ],
      ),
    );
  }
}