flutter-仿京东商城03

一、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;

          });