flutter - 行滚动不适用于 SingleChildScrollView 或 ListView

Question

我试图做一个简单的滚动行。我尝试使用SingleChildScrollView的ListView属性scrollDirection: Axis.horizontal，但我没有找到不起作用的原因。

错误

右侧的 RenderFlex 溢出了 196 个像素。

家长

class HotThisWeek extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text('Hot this week', style: kBigBoldText),
        const SizedBox(height: kCommonSeparation),
        HotThisWeekPostPreview()
      ],
    );
  }
}

孩子

class HotThisWeekPostPreview extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Map> hotBackgrounds = [
      {
        'backgroundImage':
            'https://images.unsplash.com/photo-1577644036183-94ce86392140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1236&q=80',
        'song': 'Call me never',
        'profileName': 'Courtney Nguyen'
      },
      {
        'backgroundImage':
            'https://images.unsplash.com/photo-1546934469-0659d570f44e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1234&q=80',
        'song': 'Black in the dark',
        'profileName': 'Wade Richards'
      },
      {
        'backgroundImage':
            'https://images.unsplash.com/photo-1577644036183-94ce86392140?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1236&q=80',
        'song': 'Call me never',
        'profileName': 'Courtney Nguyen'
      },
    ];
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: buildHotThisWeekPostPreview(hotBackgrounds),
      ),
    );
  }

  List<Padding> buildHotThisWeekPostPreview(List<Map> hotBackgrounds) {
    List<Padding> widgets = [];

    hotBackgrounds.forEach((hot) {
      widgets.add(Padding(
        padding: const EdgeInsets.only(right: kMediumSeparation),
        child: Stack(children: <Widget>[
          BackgroundImage(
            backgroundImage: hot['backgroundImage'],
            height: kSizePhotoHotThisWeek,
          ),
          Positioned(
            left: 10,
            bottom: 40,
            child: Container(
              width: kSizePhotoHotThisWeek - 15,
              child: Text(
                hot['song'],
                overflow: TextOverflow.ellipsis,
                style: kMediumWhiteBoldText,
              ),
            ),
          ),
          Positioned(
            left: 10,
            bottom: 15,
            child: Container(
              width: kSizePhotoHotThisWeek - 15,
              child: Text(
                hot['profileName'],
                overflow: TextOverflow.ellipsis,
                style: TextStyle(color: Colors.white),
              ),
            ),
          )
        ]),
      ));
    });
    return widgets;
  }
}

标签： flutterflutter-layout

Answer 1

出乎意料的原因是这篇文章中显示的我的父级的父级有一个 Row，无论出于何种原因，滚动只允许在第一行，而在第二行被忽略。