使用 Column 内的 ListView 获得垂直视口的高度不受限制答案

【问题标题】：Getting Vertical viewport was given unbounded height using ListView inside Column使用 Column 内的 ListView 获得垂直视口的高度不受限制
【发布时间】：2019-10-27 04:20:05
【问题描述】：

我想在Column 小部件中添加Container 列表。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    fixedContainer(context),
),

  Widget fixedContainer(BuildContext context) {
    return ListView(
      children: <Widget>[
        FutureBuilder<List<AddCash>>(
          future: future,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                  children:
                      snapshot.data.map((todo) => nameColumn(todo)).toList());
            } else {
              return SizedBox();
            }
          },
        ),
      ],
    );
  }

  Widget nameColumn(AddCash addCash) {
    return Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text(
        'name: ${addCash.name}',
      ),
    );
  }

提示垂直视口的高度不受限制。我需要设置高度吗？我没有设置高度，因为我需要动态添加容器。

完整代码

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

import '../data/repository_service_addcash.dart';
import '../models/addcash.dart';

class CalendarPage extends StatefulWidget {
  @override
  _CalendarPageState createState() => _CalendarPageState();
}

class _CalendarPageState extends State<CalendarPage> {
  Future<List<AddCash>> future;
  int id;
  @override
  initState() {
    super.initState();

    future = RepositoryServiceAddCash.getAllAddCash();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                //THE FIRST COLUMN NEEDS TO BY DYNAMICALLY PRODUCDED
                // nameColumnContainer(context),
                Container(
                  alignment: Alignment.center,
                  width: 120.0,
                  height: 60.0,
                  color: Colors.white,
                  margin: EdgeInsets.all(4.0),
                  child: Text(
                    "ONE",
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  width: 120.0,
                  height: 60.0,
                  color: Colors.white,
                  margin: EdgeInsets.all(4.0),
                  child: Text(
                    "TWO",
                  ),
                ),
                Container(
                  alignment: Alignment.center,
                  width: 120.0,
                  height: 60.0,
                  color: Colors.white,
                  margin: EdgeInsets.all(4.0),
                  child: Text(
                    "THREE",
                  ),
                ),
              ],
            ),
            Flexible(
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      child: Row(
                        // children: getDaysInWeek(),
                        children: <Widget>[
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "A",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "B",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "C",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "D",
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      child: Row(
                        children: <Widget>[
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "H",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "F",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "3000",
                            ),
                          ),
                          Container(
                            alignment: Alignment.center,
                            width: 120.0,
                            height: 60.0,
                            color: Colors.white,
                            margin: EdgeInsets.all(4.0),
                            child: Text(
                              "4000",
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.center,
                      width: 120.0,
                      height: 60.0,
                      color: Colors.white,
                      margin: EdgeInsets.all(4.0),
                      child: Text(
                        "two",
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget nameColumnContainer(BuildContext context) {
    return ListView(
      shrinkWrap: true,
      children: <Widget>[
        FutureBuilder<List<AddCash>>(
          future: future,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return Column(
                  children:
                      snapshot.data.map((todo) => nameColumn(todo)).toList());
            } else {
              return SizedBox();
            }
          },
        ),
      ],
    );
  }

  Widget nameColumn(AddCash addCash) {
    return Container(
      alignment: Alignment.center,
      width: 120.0,
      height: 60.0,
      color: Colors.white,
      margin: EdgeInsets.all(4.0),
      child: Text(
        'name: ${addCash.name}',
      ),
    );
  }
}

【问题讨论】：

标签： flutter

【解决方案1】：

您可以将shrinkWrap: true 设置为ListView。

shrinkWrap property

如果滚动视图不收缩包裹，那么滚动视图将展开到 scrollDirection 中允许的最大尺寸。如果滚动视图在 scrollDirection 中具有无限约束，然后 shrinkWrap 必须为真。

【讨论】：

它可以工作，但是当我点击页面外并点击返回时出现错误：在 performLayout() 期间抛出以下断言：'package:flutter/src/rendering/viewport.dart' ：断言失败：第 1629 行第 16 行：'constraints.hasBoundedWidth'：不正确。用户创建的导致错误的小部件的祖先是 ListView
我没有看到任何点击您的代码。请发布一个最小的可重现示例，我无法编译您发布的代码，因此无法帮助您。
我已经添加了整个代码。我的目标是在nameColumnContainer(context) 下动态生成第一列中的项目（当前硬编码到容器中：一个、两个、三个）
好的，这个问题的问题已经用shrinkWrap解决了：是的，现在你面临另一个问题，就是Column里面的ListView需要有一个宽度。你可以只用宽度为 120 的容器包装 nameColumnContainer(context)。