flutter - 列 flutter 内的水平滚动

Question

我想实现带有类别的水平滚动:


我将“类别”部分放在“列”中(也许这不是正确的方法，如果我错了，请纠正我)，然后尝试使用ListView / Slivers使类别可滚动。我遇到的问题是，如果我在Column中使用ListView，则需要为其指定约束。我试图用Expanded小部件包装它，但它对我没有用。然后我尝试了CustomScrollView和Slivers，但看来我做错了。您能为我提出这种观点的建议吗？还是可以纠正我。

          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超出renderview端口时，您会收到错误消息。要解决此问题，请在ListView小部件中扭曲Container并为其指定height和width属性:

检查以下内容:

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',
            ),
          ],
        ),
      ),