Listview показывает проблему переполнения с правой стороны

ProgramBox

Listview показывает проблему переполнения с правой стороны

Post author:admin
Запись опубликована:29 ноября, 2022
Post category:Вопросы по программированию

#flutter

Вопрос:

У меня есть приведенный ниже код для отображения 2 карт и попытки горизонтального перемещения. Listview уже установлен. Направление оси горизонтально.

Тем не менее, в правой части есть проблема с переполнением. Также пробовал термоусадочную пленку, но не сработало.

Проблема может быть легко воспроизведена на dart pad: 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"))),
                    )
                  ],
                ),
              ))
            ],
          )
        ],
      ),
    ));
  }
}

Ответ №1:

Вы добавили column и row внутри своего listview , а затем добавили оба cards в свой row widget , это неправильный подход, поэтому вам просто нужно сначала отделить все это. Поэтому я изменил ваш код и добавил scrollDirection также обернуть ваш listview 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"))),
                      )
                    ],
                  ),
                ))
              ],
            ),
          ),

        ],
      ),
    ));
  }
}

1. Спасибо за ответ, не могли бы вы еще раз проверить вопрос? Я полностью пропустил раздел строки.

2. @Pankaj просто дайте мне пару минут

3. @Pankaj Вы хотите добавить Text к каждому элементу Listview справа, например, если ваши элементы 10 будут 10 text добавлены правильно?

4. Спасибо за ответ. Текст находится в верхней части списка, и в listview будут изображения. Таким образом, будет 2 дочерних элемента. Строка позаботится об обоих текстах. и в ListView будут изображения.

5. @Pankaj вам просто нужно обернуть свой Listview контейнером и применить высоту к вашему контейнеру, вы можете еще раз проверить мой ответ

Ответ №2:

вы не указали параметр direction для виджета ListView, а также не предоставили свойству shrinkWrap для ListView значение true, чтобы ограничить размер ListView, также вам не нужен контейнер как дочерний элемент ListView после этого, поэтому удалите его тоже.

Окончательный код будет следующим :

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

1. Для дочернего массива не вызывается свойство scrollDirection .

2. Не для дочернего массива, а для listview.отредактировано.

3. Теперь, пожалуйста, проверьте это на dart pad, вы заметите, что карта исчезает, и в консоли отображается ошибка. Что это происходит?

4. Это потому, что вы не установили ограничения, поэтому для виджета столбца вам нужно установить размер с помощью SizedBox или Container в зависимости от вашего варианта использования.

Метки: Listview показывает проблему переполнения с правой стороны