flutter - 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"))),
                    )
                  ],
                ),
              ))
            ],
          )
        ],
      ),
    ));
  }
}

标签： flutter

Answer 1

您在您的内部添加了column和，然后将两者都添加到您的这是错误的方法，因此您只需先将其全部分开。因此，我更改了您的代码并添加了还包装您的列表视图以提供高度和边距。您可以检查以下答案rowlistviewcards row widgetscrollDirectionContainer

第一个答案

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"))),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),

        ],
      ),
    ));
  }
}