我试图做一个简单的滚动。我尝试使用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;
}
}
答案 0 :(得分:0)
出乎意料的原因是,本文中显示的我父母的父母有一个Row,并且由于任何原因,仅在第一行中允许滚动,而在第二行中则忽略滚动。