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

Question

我想在小部件 Container内部添加一个列表。Column

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

Answer 1

你可以设置shrinkWrap: true为ListView.

收缩包装属性

如果滚动视图不收缩包裹，那么滚动视图将扩展到滚动方向中允许的最大大小。如果滚动视图在scrollDirection 中有无限约束，则shrinkWrap 必须为真。