Listview在右侧显示溢出问题

问题描述

我有下面的代码来显示2张卡，并试图进行水平移动.Listview已经到位.轴方向是水平的.

I have below code to display 2 cards and trying to have horizontal movement. Listview is already in place. Axis direction is horizontal.

仍然在右侧存在溢出问题.还尝试过收缩包装，但没有用.

Still there is overflow issue in right side. Also tried shrink wrap but did not work.

问题可以轻松地在飞镖板上复制: https://dartpad.dartlang.org/dart?只需复制以下代码即可.

Issue can be easily replicated on dart pad: https://dartpad.dartlang.org/dart? just copy the below code.

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

推荐答案

您在 listview 内添加了 column 和 row 将 cards 放入您的行小部件中这是错误的方法，因此您只需要首先将它们分开即可.因此，我更改了代码，并添加了 scrollDirection ，还使用 Container 包装了您的列表视图，以提供高度和边距.您可以检查以下答案

You added column and row inside your listview and then added both cards into your row widget This is the wrong approach so you just need to separate this all first. So I change your code and added scrollDirection also wrap your listview with Container for giving height and margin. You can check following answer

第一个答案

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

        ],
      ),
    ));
  }
}

这篇关于Listview在右侧显示溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！