Виджет столбца вызывает проблемы с разметкой - PullRequest
Новая
       7

Виджет столбца вызывает проблемы с разметкой

1 голос
/ 01 августа 2020

В настоящее время у меня есть список, состоящий из Containers() (поскольку я не могу использовать ListView, потому что мне нужна внешняя прокрутка), и он работает хорошо, за исключением того, что в каждом из них у меня есть Row() с двумя Column() виджетами . Первый столбец должен быть ограничен печатью изображения, а второй - отображать определенную информацию в строках. Это очень типичный способ составления списков, поэтому я подумал, что это не должно вызывать проблем.

Дело в том, что второй виджет Text() во втором Column(), кажется, всегда вызывает верхний Text() сдвигаться вправо, вызывая переполнение и делая текст нечитаемым, недоступным для пользователя. Посмотрите на это изображение:

введите описание изображения здесь

Да, названия есть (даже если вы не видите второй). Просто они довольно сдвинуты вправо. Если я удалю описание, приведенное ниже, они появятся правильно, слева, с небольшим отступом слева. Дело в том, что эти заголовки должны присутствовать независимо от того, какие элементы находятся ниже, или, по крайней мере, так я понимаю, что виджет Column() должен работать.

Взгляните на код: 

 getListItems(List<Artist> artistList) {
    // Iterate through the whole Artists array and render a list item for each one
    return artistList.map((Artist artist) {
      return Container(
          margin: EdgeInsets.only(top: 12),
          height: 100,
          color: Colors.grey[600],
          child: Row(
            children: <Widget>[
              Padding(padding: EdgeInsets.only(left: 15)),
              Column(
                children: <Widget>[
                  Image(
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      image: artist.avatar)
                ],
              ),
              Padding(padding: EdgeInsets.only(top: 5)),
              Column(
                children: <Widget>[
                  Text(
                    artist.name,
                    style: TextStyle(fontSize: 18),
                  ),
                  Padding(padding: EdgeInsets.only(top: 5)),
                  Text(artist.description, style: TextStyle(fontSize: 13))
                ],
              )
            ],
          ));
    }).toList();

Что не так в этом коде? Спасибо!

Ответы [ 6 ]

2 голосов
/ 01 августа 2020

Вы можете заключить второй столбец в Flexible, чтобы избежать переполнения: 

Container(
          margin: EdgeInsets.only(top: 12),
          height: 100,
          color: Colors.grey[600],
          child: Row(
            children: <Widget>[
              Padding(padding: EdgeInsets.only(left: 15)),
              Column(
                children: <Widget>[
                  Image(
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      image: artist.avatar)
                ],
              ),
              Flexible(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      artist.name,
                      style: TextStyle(fontSize: 18),
                    ),
                    Padding(padding: EdgeInsets.only(top: 5)),
                    Text(artist.description, style: TextStyle(fontSize: 13))
                  ],
                ),
              )
            ],
          ))
1 голос
/ 01 августа 2020

в первую очередь вы можете определить контейнер как дочерний элемент Expanded (контейнер в верхней части виджета) 

Expanded(
  child:
    Container(
            margin: EdgeInsets.only(top: 12),
            height: 100,
            color: Colors.grey[600],......

или вы можете использовать медиа-запрос, медиа-запрос, определяет длину или ширину в зависимости от разрешения экрана телефона вы должны определить медиа-запрос для height или width, используйте для этого mediaquery, MediaQuery.of(context).size.height,

Container(
          margin: EdgeInsets.only(top: 12),
          height: `MediaQuery.of(context).size.height`,
          color: Colors.grey[600],
          child: Row(
            children: <Widget>[
              Padding(padding: EdgeInsets.only(left: 15)),
              Column(
                children: <Widget>[
                  Image(
                      width: 100,
                      height: 100,
                      fit: BoxFit.cover,
                      image: artist.avatar)
                ],
              ),
              Padding(padding: EdgeInsets.only(top: 5)),
              Column(
                children: <Widget>[
                  Text(
                    artist.name,
                    style: TextStyle(fontSize: 18),
                  ),
                  Padding(padding: EdgeInsets.only(top: 5)),
                  Text(artist.description, style: TextStyle(fontSize: 13))
                ],
              )
            ],
          ));
    }).toList();

, если при использовании медиа-запроса переполнено ошибка показывает, что вы должны сказать MediaQuery.of(context).size.height - the pixels that error says pixels are overflowed, это означает, что если ошибка говорит, что переполнено 128 пикселей, вы должны сказать

Container( height: MediaQuery.of(context).size.height -128 ,)

1 голос
/ 01 августа 2020

Использовать развернутый 

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      color: Colors.grey[600],
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: [
          Container(
            width: 100,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage("https://picsum.photos/100"),
              ),
            ),
          ),
          const SizedBox(width: 8.0),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("Artist Name"),
                const SizedBox(height: 8.0),
                Text("Artist Description"),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
1 голос
/ 01 августа 2020

попробовать Расширенный 

  getListItems(List<Artist> artistList) {
  // Iterate through the whole Artists array and render a list item for each one
  return artistList.map((Artist artist) {
    return Container(
        margin: EdgeInsets.only(top: 12),
        height: 100,
        color: Colors.grey[600],
        child: Row(
          children: <Widget>[
            Padding(padding: EdgeInsets.only(left: 15)),
            Column(
              children: <Widget>[
                Image(
                    width: 100,
                    height: 100,
                    fit: BoxFit.cover,
                    image: artist.avatar)
              ],
            ),
            Padding(padding: EdgeInsets.only(top: 5)),
            Expanded(
              child: Column(
                children: <Widget>[
                  Text(
                    artist.name,
                    style: TextStyle(fontSize: 18),
                  ),
                  Padding(padding: EdgeInsets.only(top: 5)),
                  Text(artist.description, style: TextStyle(fontSize: 13))
                ],
              ),
            )
          ],
        ));
  }).toList();
1 голос
/ 01 августа 2020

Вы можете использовать Flexible() виджет Оберните текстовый виджет в гибкий виджет. 

  return  Center(
        child: Padding(padding:  EdgeInsets.only(left: 50, right: 50),
          child:  Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Flexible(
                  child: Text('Hii....helloo....how r u?...here you can show multiple line.', textAlign: TextAlign.center,style: TextStyle(fontSize: 20.0, color: Colors.white))),
            ],
          ),
        )
      );
1 голос
/ 01 августа 2020

Вам необходимо внести некоторые изменения в Column, который содержит Text виджеты 

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              artist.name,
              style: TextStyle(fontSize: 18),
            ),
            Padding(padding: EdgeInsets.only(top: 5)),
            Container(
              width: MediaQuery.of(context).size.width * 0.5,   // can change "0.5" according to your requirement
              child: Text(
                artist.description,
                style: TextStyle(fontSize: 13),
              ),
            ),
          ],
      )
...