Блог

Главная - Вопросы по программированию - Листтильный tileColor переполняется за пределами своего контейнера, трепещет

Листтильный tileColor переполняется за пределами своего контейнера, трепещет

#flutter #dart #colors #overflow

Вопрос:

Я попытался исправить эту проблему, когда цвет моего элемента списка (1) не отображается за каждой плиткой, а вместо этого (2) отображается как переполнение за родительским контейнером.

Вот скриншот проблемы.

Я использую версию 2.2.3 Flutter с Dart 2.13.4. Сначала я подумал, что с моим эмулятором возникла проблема (API 30 Pixel 2), поэтому я попробовал вместо этого использовать API 30 Pixel 3. Проблема все еще оставалась.

Я попросил друга проверить мой код на наличие проблем, он сказал, что не смог их найти, и код работал так, как и предполагалось на его экране. Я не понимаю, почему это было так, я полагаю, что он также использует Flutter только в одной версии позади меня. С применением разных цветов это выглядело так на его экране, к чему я и стремился.

Это только усложнило мне понимание проблемы, а также сбило меня с толку, потому что он запускал мой код без изменений, и проблема отображалась только на моем экране.

Если вам нужно увидеть код для конструктора ListView и родительского контейнера, я прикреплю его ниже здесь.

Это виджет для конструктора ListView:

 Widget _buildTodoList() {
    return ListView.builder(
        itemBuilder: (context, i) {
          return _buildRow(i   1, _todoItems[i]);
        },
        itemCount: _todoItems.length,
    );
  }

Это виджет для ListTile:

 Widget _buildRow(int key, String value) {
    return Container(
      margin: EdgeInsets.only(bottom: 5),
      child: ListTile(
        // item tile
        tileColor: Colors.blueGrey,
        leading: Container(
          height: 35,
          width: 35,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.grey.shade800,
          ),
          child: Center(
            child: Text(
              key.toString(),
              style: TextStyle(
                color: Colors.grey.shade300,
              ),
            ),
          ),
        ),

        title: Text(value),
      ),
    );
  }

А это родительский контейнер:

 Expanded(
                  child: Container(
                    // for list of items
                    child: _buildTodoList(),
                    height: 250,
                    decoration: BoxDecoration(
                      color: Colors.blueGrey.shade50,
                      border: Border.all(
                          width: 0.6,
                          color: Colors.black,
                          style: BorderStyle.solid),
                    ),
                  ),
                ),

Спасибо!

Комментарии:

1. Вы устанавливаете там маржу. Удалять margin: EdgeInsets.only(bottom: 5), . Вы говорите о нижнем цвете в списке или о цвете фона в этих кнопках и других виджетах ?

2. Привет. Я говорю о цвете плитки плитки списка. Предполагается, что он отображается в виде плиток внутри контейнера, но вместо этого он переполняется вокруг родительского контейнера.

Ответ №1:

Похоже, он показывает визуальные строки из-за пустых мест. В нашем случае у нас есть список height:250 . Но если вы обернете Expanded его, это займет дополнительные места на экране. Я тестирую на основе Scaffold>Column>Container>ListView . Если вы обернете Column другой Container и предоставите цвет, это исправит проблему. Подобный этому:

     return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) => Container(
          color: Colors.white,
          child: Column(
            children: [
              Container(
                // for list of items
                child: ListView.builder(
                  itemCount: _todoItems.length,
                  itemBuilder: (context, i) {
                    return _buildRow(i   1, _todoItems[i]);
                  },
                ),

                ///50% of screen
                height: constraints.maxHeight * .5,
                decoration: BoxDecoration(
                  color: Colors.blueGrey.shade50,
                  border: Border.all(
                    width: 0.6,
                    color: Colors.black,
                    style: BorderStyle.solid,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

Тем не менее, я предпочитаю использовать LayoutBuilder .

Кроме того, вы можете добавить еще Expanded>Container одного в качестве Column ребенка, это исправит проблему. Кстати, я надеюсь, что вы останетесь довольны 1-м решением. Если у вас больше элементов, вы также можете использовать stack здесь.

Метки: ,