一、Wrap的使用

/热门商品
  Widget _hotGoods() {
    var itemWidth = (ScreenAdaper.screenWidth() - 30) / 2;

    return Container(
      padding: EdgeInsets.all(10),
      child: Wrap(
        runSpacing: 10,
        spacing: 10,
        children: this._bestProductList.map((value) {
          //图片
          String sPic = value.pic;
          sPic = Config.baseUrl + sPic.replaceAll('\\', '/');

          return InkWell(
            onTap: () {
              Navigator.pushNamed(context, '/productContent',
                  arguments: {"id": value.id});
            },
            child: Container(
              padding: EdgeInsets.all(10),
              width: itemWidth,
              decoration: BoxDecoration(
                  border: Border.all(
                      color: Color.fromRGBO(233, 233, 233, 0.9), width: 1)),
              child: Column(
                children: <Widget>[
                  Container(
                    width: double.infinity,
                    child: AspectRatio(
                      //防止服务器返回的图片大小不一致导致高度不一致问题
                      aspectRatio: 1 / 1,
                      child: Image.network(
                        "${sPic}",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: ScreenAdaper.height(20)),
                    child: Text(
                      "${value.title}",
                      maxLines: 2,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(color: Colors.black54),
                    ),
                  ),
                  Padding(
                    padding: EdgeInsets.only(top: ScreenAdaper.height(20)),
                    child: Stack(
                      children: <Widget>[
                        Align(
                          alignment: Alignment.centerLeft,
                          child: Text(
                            "¥${value.price}",
                            style: TextStyle(color: Colors.red, fontSize: 16),
                          ),
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: Text("¥${value.price}",
                              style: TextStyle(
                                  color: Colors.black54,
                                  fontSize: 14,
                                  decoration: TextDecoration.lineThrough)),
                        )
                      ],
                    ),
                  )
                ],
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

二、GridView的使用

看名字就可以理解
SliverGridDelegateWithFixedCrossAxisCount 固定个数
SliverGridDelegateWithMaxCrossAxisExtent 不固定个数
跟iOS中UICollectionView差不多

Widget rightCateWidget() {
  final itemWidth = (ScreenAdaper.screenWidth() - 30) / 3;

  if (this._productRightList.length > 0) {
    return Container(
      height: double.infinity,
      color: Color.fromRGBO(240, 240, 240, 1),
      child: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: itemWidth / (itemWidth + 40),
        ),
        itemBuilder: (context, index) {
          String pic = this._productRightList[index].pic;
          pic = Config.baseUrl + pic.replaceAll("\\", "/");
          return Container(
              color: Color.fromRGBO(180, 180, 180, 1),
              child: Column(
                children: [
                  AspectRatio(
                      aspectRatio: 1 / 1,
                      child: Image.network(
                        "${pic}",
                        fit: BoxFit.cover,
                      )),
                  Center(
                      heightFactor: 1.5,
                      child: Text("${this._productRightList[index].title}"))
                ],
              ));
        },
        itemCount: this._productRightList.length,
      ),
    );
  } else {
    return Text("暂无数据");
  }
}

三、IndexedStack保持页面状态

IndexedStack和Stack一样，都是层布局控件，可以在一个控件上面放置另一个控件，但唯一不同的是IndexedStack在同一时刻只能显示子控件中的一个控件，通过Index属性来设置显示的控件。IndexedStack来保持页面状态的优点就是配置简单。IndexedStack保持页面状态的缺点就是不方便单独控制每个页面的状态。

四、AutomaticKeepAliveClientMixin保持页面状态

AutomaticKeepAliveClientMixin结合tab切换保持页面状态相比IndexedStack而言配置起来稍微有些复杂。它结合底部BottomNavigationBar保持页面状态的时候需要进行如下配置。

• 初始化PageController

• 结合PageView 跳转

• 再需要保持状态的页面继承AutomaticKeepAliveClientMixin

• 重新方法返回true即可

  class Tabs extends StatefulWidget {
    @override
    _TabsState createState() => _TabsState();
  }
  
  class _TabsState extends State<Tabs> {
    int _currentIndex = 0;
    List <Widget>_pageList = [HomePage(), CategoryPage(),CartPage(),UsersPage()];
    PageController _pageController;
    @override
    void initState() {
      //初始化页面
      _pageController = PageController(initialPage: _currentIndex);
      super.initState();
    }
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("仿京东商城"),
        ),
        body: PageView(
          controller: _pageController,
          children: this._pageList,
          onPageChanged: (index){
            print(index);
          },
        ),
        bottomNavigationBar: BottomNavigationBar(
            currentIndex: this._currentIndex,
            onTap: (index) {
              setState(() {
                this._currentIndex = index;
                this._pageController.jumpToPage(index);
              });
            },
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.red,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: "首页",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.category),
                label: "分类",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.shopping_cart),
                label: "消息",
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: "我的",
              ),
            ]),
      );
    }
  }

  禁止PageView滑动

  body: PageView(
    physics: new NeverScrollableScrollPhysics(),//禁止滑动
    controller: _pageController,
    children: this._pageList,
    onPageChanged: (index){
      print(index);
      setState(() {
          this._currentIndex = index;
  
      });