Listview右侧显示溢出问题

Question

我有下面的代码显示2卡，并试图有水平移动。Listview已经就位了。轴方向为水平

右侧仍有溢出问题。也试过收缩包装，但没有效果。

问题可以很容易地复制到飞镖垫:https://dartpad.dartlang.org/dart?复制下面的代码:

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(body: HomeScreen()),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Text("Text 1", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Text 2", style: TextStyle(fontWeight: FontWeight.bold))
]),
ListView(
scrollDirection: Axis.horizontal,
children: [
Card(
child: Container(
height: 230,
width: 170,
child: Column(
children: [
Container(
height: 170,
width: 150,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/user.png"))),
)
],
),
))
],
)
],
),
));
}
}

Answer 1

您在listview中添加了column和row，然后将cards添加到row widget中。这是错误的方法，因此您只需要先将这一切分开。所以我改变了你的代码，并添加了scrollDirection也包装你的列表视图与Container给予高度和边距。你可以检查下面的答案

第一次回答

SafeArea(
child: Container(
height: 230,
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
child: ListView(scrollDirection: Axis.horizontal, children: [
Card(
child: Container(
height: 230,
width: 170,
//color: Colors.blue,
child: Column(
children: [
Container(
height: 170,
width: 150,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/shutterstock_1138149659-760x400.png"))),
)
],
),
)),
Card(
child: Container(
height: 230,
width: 180,
//color: Colors.blue,
child: Column(
children: [
Container(
height: 170,
width: 160,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/shutterstock_1138149659-760x400.png"))),
)
],
),
))
])))

第二回答

class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Text("Text 1", style: TextStyle(fontWeight: FontWeight.bold)),
Text("Text 2", style: TextStyle(fontWeight: FontWeight.bold))
]),
Container(
height: 230,
child: ListView(
scrollDirection: Axis.horizontal,
children: [
Card(
child: Container(
height: 230,
width: 170,
child: Column(
children: [
Container(
height: 170,
width: 150,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://cdn.searchenginejournal.com/wp-content/uploads/2018/09/shutterstock_1138149659-760x400.png"))),
)
],
),
))
],
),
),
],
),
));
}
}

Answer 2

你还没有为ListView小部件提供方向参数，也提供了ListView的shrinkWrap属性为true，以约束ListView的大小，你也不需要容器作为ListView的子元素，所以也删除它。

最终代码如下:

body: SafeArea(
child: ListView(
scrollDirection: Axis.horizontal,
shrinkWrap : true,
children: [ 

child: Column(children: [
Row(children: [