水平列表视图的垂直列表视图答案

【问题标题】：Vertical ListView of Horizontal Listviews水平列表视图的垂直列表视图
【发布时间】：2021-09-14 04:40:36
【问题描述】：

我试图有一个水平列表视图的垂直列表。目前，用户体验真的很糟糕，因为滚动有时不起作用。这类似于 youtube 主页或 Spotify，您向下滚动并且每一行都是可滚动的

 Expanded(
                  flex: 5,
                  
                
                  child: Container(
                    width: double.infinity,
                    height: 500,
                    child: ListView.builder(
                      shrinkWrap: true,
                      physics: ScrollPhysics(),
                      itemCount: skills.length,
                      itemBuilder: (context, index){
                      return CategoryHomeScreen(videosInSection: videoRecommended[skills[index]] ?? [], skill: skills[index]);
                    }),
                  ),
                ),

项目构建器中引用的小部件

return Column(
  children: [
    Padding(
        padding:
            EdgeInsets.fromLTRB(HomeBrain.headingPaddingLeftSide, 0, 0, 0),
        child: Text(
          widget.skill,
          style: Constants.subHeading,
        )),
  
    //these are horizontal scrollviews to see more videos
    Container(
      height: HomeBrain.videoHeightBox +
          HomeBrain.sizeBetweenvideoAndSub +
          HomeBrain.videoHeight -
          HomeBrain.takeAwayFromContainerSizedOfVideoFram,
      child: SizedBox(
        height: 0,
        width: double.infinity,
        child: ListView.builder(
          physics: ClampingScrollPhysics(),
          scrollDirection: Axis.horizontal,
          itemCount: widget.videosInSection.length,
          itemBuilder: (context, int index) {
            //passes over author, thumbnail url, thumbnail and video url so each tile is unique
            return ScreenTile(
              authorName: widget.videosInSection[index].userNameBy,
              pathToThumbnail: widget.videosInSection[index].thumbNailUrl,
              thumbnail: widget.videosInSection[index].thumbnail,
              pathToVideo: widget.videosInSection[index].videoUrl,
              profilePic: widget.videosInSection[index].profilePic,
              videoBrain: widget.videosInSection[index],
            );
          },
        ),
      ),
    ),
  ],
);

【问题讨论】：

你想水平滚动你的列表吗？
@RavindraS.Patil 我想要一个垂直列表视图有水平滚动列表的子级。

标签： flutter dart listview

【解决方案1】：

你可以这样做。这是为了演示目的。

ListView.builder(
    itemCount: 15,
    itemBuilder: (_, i) {
      return _horizontalListView();
    },
  ),

Widget _horizontalListView() {
return SizedBox(
  height: 120,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemBuilder: (_, __) => _buildBox(color: Colors.orange),
  ),
);
Widget _buildBox({required Color color}) => Container(margin: EdgeInsets.all(12), height: 100, width: 200, color: color);

【讨论】：