Question

这是我的样本 screen。

正如所见，我希望能够在红色容器中垂直滚动，但也能够水平滚动图片。

这是我的工作代码：

class CityPlaceDetailsScreen extends StatelessWidget {
  CityPlaceModel cityPlaceModel;

  @override
  Widget build(BuildContext context) {
    Map<String, Object> arguments = ModalRoute.of(context).settings.arguments;
    this.cityPlaceModel = arguments['cityPlace'];
    Size size = MediaQuery.of(context).size;

    return Scaffold(
      body: Stack(
        children: [
          Hero(
            tag: cityPlaceModel.pictures[0],
            child: Container(
              height: size.height * 0.5,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(cityPlaceModel.pictures[0]),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 300),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(30),
                  topRight: Radius.circular(30),
                ),
              ),
              child: Column(
                children: [
                  Text("ABC"),
                  Expanded(
                    child: ListView(
                      children: [
                        Column(
                          children: [
                            Container(
                              height: 1000,
                              child: Column(
                                children: [
                                  Text(
                                    "Photos",
                                    style: TextStyle(
                                      fontSize: 20,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  Expanded(
                                    child: ListView(
                                      physics: BouncingScrollPhysics(),
                                      scrollDirection: Axis.horizontal,
                                      shrinkWrap: true,
                                      children:
                                          buildPhotos(cityPlaceModel.pictures),
                                    ),
                                  ),
                                  Container(
                                    color: Colors.yellow,
                                    height: 300,
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  List<Widget> buildPhotos(List<String> images) {
    List<Widget> list = [];
    list.add(
      SizedBox(
        width: 24,
      ),
    );
    for (var i = 0; i < images.length; i++) {
      list.add(buildPhoto(images[i]));
    }
    return list;
  }

  Widget buildPhoto(String url) {
    return Container(
      color: Colors.red,
      child: FittedBox(
        child: ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(10.0),
            topRight: const Radius.circular(10.0),
          ),
          child: Image(
            height: 500,
            width: 300,
            image: AssetImage(
              url,
            ),
          ),
        ),
        fit: BoxFit.fill,
      ),
    );
  }
}

问题是我希望能够做到这一点，而不必被迫指定 heigth:1000。这样做的原因是我将在容器内有一些高度可变的动态数据。

如果我删除我得到的高度：

RenderFlex children have non-zero flex but incoming height constraints are unbounded.


RenderBox was not laid out: RenderFlex#ec8b2 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'

Answer 1

因为在你的树中，Exapnd 给出了尽可能大的无限高度，而 ListView 是一个无限高度的容器。

您在 ListView 中的原始树：

...
ListView  <- here
  - Column
      - Container(height: 1000)
          - Column
              - Text
              - Expanded   <- here
              - Container

树似乎重复了 Column 和 ListView 只包含 1 个孩子。您可以使用 Flexible 简化如下：

...
ListView
  - Text
  - Flexible  <- here
    - ListView
  - Container

Answer 2

解决方案是从第二个列表视图中删除列和 Expanded()，只为外部 ListView() 保留第一个 Expanded()。

Expanded(
                    child: Padding(
                      padding: EdgeInsets.only(
                        right: 24,
                        left: 24,
                      ),
                      child: ListView(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Padding(
                                padding: EdgeInsets.only(
                                  bottom: 10,
                                ),
                                child: Text(
                                  "Descriere",
                                  style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                              Container(
                                child: Text(
                                  cityPlaceModel.description,
                                  style: TextStyle(
                                    fontSize: 16,
                                    color: Colors.grey[500],
                                  ),
                                ),
                              ),
                              Text(
                                "Photos",
                                style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Container(
                                height: 160,
                                child: ListView(
                                  physics: BouncingScrollPhysics(),
                                  scrollDirection: Axis.horizontal,
                                  shrinkWrap: true,
                                  children:
                                      buildPhotos(cityPlaceModel.pictures),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),

嵌套列表视图 - 在不指定高度的情况下垂直和水平扩展

2 个答案: