ListView перекрывает элементы в верхней части списка

Question

Я получаю странный визуальный сбой при использовании ListView в моем приложении Flutter.Я воспроизвел проблему в минимальном фрагменте кода (ниже).

Когда список прокручивается до самого верха, список перекрывает элементы под ним.Как только я прокручиваю немного вниз, список учитывает границы элемента Expanded, в котором он находится, и перекрывающиеся области прекращаются.

Выше, на левом изображении показан недостаток.Обратите внимание, как элементы перекрывают красную область.Правильное изображение показывает ситуацию, когда я немного прокрутил, теперь мы можем видеть правильное пространство, появляющееся над красной областью.

Я сделал что-то не так или здесь есть ошибка?

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new ExampleWidget()));
}

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new AspectRatio(
          child: new Container(
            height: MediaQuery.of(context).size.width,
          ),
          aspectRatio: 1.0,
        ),
        new Expanded(
          child: new ListView(
            children: <Widget>[
              new Card(child: new ListTile(title: new Text("a"))),
              new Card(child: new ListTile(title: new Text("b"))),
              new Card(child: new ListTile(title: new Text("c"))),
              new Card(child: new ListTile(title: new Text("d"))),
              new Card(child: new ListTile(title: new Text("e"))),
            ],
          ),
          flex: 10,
        ),
        new Expanded(child: new Container(), flex: 3),

        new Container(
          height: 60.0,
          color: Colors.red,
        ),

        new Expanded(child: new Container(), flex: 2),
      ],
    );
  }
}

Проблема возникает, когда я также запускаю приложение на своем телефоне.

Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.4 17E202, locale en-GB)

Answer 1

Я столкнулся с этой ошибкой сегодня - я был на бета-ветке, но переключение на мастер и восстановление не решило проблему.Похоже, что когда позиция ListView смещена на 0 относительно вершины, то есть когда анимация «больше не прокручивается» в Android (в отличие от действия весны в iOS), Tiles переполнит контейнер ListView по любой причине.,Надеюсь, они скоро исправят это!Я пытался обернуть его в контейнеры Flex и встроенные коробки, накрыв переполнение слоями и т. Д., Ничего из этого не работает.Извините, я не мог больше помочь!

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(home: new ExampleWidget()));
}

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Column(
        children: <Widget>[
          new Expanded(child: new Container(),),
          new Expanded(
            child: Column(
              children: <Widget>[
                new Expanded(
                  flex: 10,
                  child: new ListView(
                    children: <Widget>[
                      new Card(child: new ListTile(title: new Text("a"))),
                      new Card(child: new ListTile(title: new Text("b"))),
                      new Card(child: new ListTile(title: new Text("c"))),
                      new Card(child: new ListTile(title: new Text("d"))),
                      new Card(child: new ListTile(title: new Text("e"))),
                    ],
                  ),
                ),
                new Expanded(
                  flex: 2,
                  child: new Container(
                    color: Colors.red,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}