行滚动不适用于SingleChildScrollView或ListView

时间:2020-03-22 00:35:44

标签: flutter flutter-layout

我试图做一个简单的滚动。我尝试使用SingleChildScrollView的属性来ListViewscrollDirection: 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;
  }
}

enter image description here

1 个答案:

答案 0 :(得分:0)

出乎意料的原因是,本文中显示的我父母的父母有一个Row,并且由于任何原因,仅在第一行中允许滚动,而在第二行中则忽略滚动。