水平卷轴内的柱状颤动

Question

我想实现一个水平滚动的分类。

我把我的Categories部分放在Column中（也许这不是正确的方式，如果我错了请纠正我），然后我尝试使用ListViewSlivers来使我的分类可以滚动。我面临的问题是，如果我在Column中使用ListView，我需要为它指定约束条件。我试着用Expanded widget把它包起来，但是没有成功。然后我尝试了CustomScrollView和Slivers，但似乎我做错了什么。你能不能给我建议这个视图的widgtes的正确结构或者纠正我。

          Container(
            margin: EdgeInsets.all(40),
            child: Column(
              children: <Widget>[
                Container(
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            'Category',
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            '8 CATEGORIES',
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 30,
                      ),
                      CustomScrollView(
                        scrollDirection: Axis.horizontal,
                        slivers: <Widget>[
                          SliverList(
                            delegate: SliverChildListDelegate([
                              CategoryCard(
                                title: 'Featured',
                                previewImageAsset:
                                    'assets/images/bliny-shokolad-klubnika.jpg',
                              ),
                            ]),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          CategoryCard(
                            title: 'Featured',
                            previewImageAsset:
                                'assets/images/bliny-shokolad-klubnika.jpg',
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

Answer 1

你得到的错误，当使用 ListView 渲染视图端口被超过。要解决这个问题，请扭曲你的 ListView 在...中 Container widget，并赋予它高度和宽度属性。

检查下面。

Container(
        // change your height based on preference
        height: 80,
        width: double.infinity,
        child: ListView(
          // set the scroll direction to horizontal
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            // add your widgets here
            CategoryCard(
              title: 'Featured',
              previewImageAsset:
              'assets/images/bliny-shokolad-klubnika.jpg',
            ),
            // space them using a sized box 
            SizedBox(width: 15,),
            CategoryCard(
              title: 'Featured',
              previewImageAsset:
              'assets/images/bliny-shokolad-klubnika.jpg',
            ),
          ],
        ),
      ),