Flutter - 如何使用动态 ListView 使 Container 增长？

Question

我有一个包含 ListView 的 Container，我希望 Container 能像 ListView 一样大。 当我删除容器上的高度时，我收到一条错误消息（垂直视口被赋予了无限的高度）。 如何使用 flutter 实现这一目标？

ListView 可以包含多个卡片项。

order_stack.dart 文件：

import 'package:flutter/material.dart';

class OrderStack extends StatelessWidget {
  const OrderStack({Key? key, required this.id, required this.tableNumber}) : super(key: key);

  final int id;
  final int tableNumber;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(5)),
        color: Color.fromRGBO(33, 49, 55, 1),
      ),
      clipBehavior: Clip.antiAlias,
      child: Column(
        children: [
          Container(
            height: 80,
            width: 400,
            color: const Color.fromRGBO(93, 194, 188, 1),
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                padding: const EdgeInsets.only(left: 30),
                child: Text(
                  'Table $tableNumber',
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 25,
                    fontWeight: FontWeight.w900,
                  ),
                ),
              ),
              Container(
                padding: const EdgeInsets.only(right: 30),
                child: Text(
                  '#$id',
                  style: const TextStyle(
                    color: Colors.black,
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
          ),
          Container(
            height: 70,
            width: 400,
            child: ListView(
              physics: const NeverScrollableScrollPhysics(),
              children: <Widget>[
                Card(
                  elevation: 0,
                  margin: EdgeInsets.zero,
                  child: ListTile(
                    tileColor: Colors.yellow[200],
                    leading: const Text(
                      '3X',
                      style: TextStyle(
                          fontSize: 30,
                          fontWeight: FontWeight.w800
                      ),
                    ),
                    title: const Text(
                      'Good Burger',
                      style: TextStyle(
                          fontSize: 20,
                          fontWeight: FontWeight.w800
                      ),
                    ),
                    subtitle: const Text('Here is a second line'),
                    trailing: IconButton(
                      iconSize: 30,
                      icon: const Icon(Icons.expand_more_outlined),
                      color: Colors.black,
                      onPressed: () {},
                    ),
                    onTap: () => print('Good Burger'),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

将Container替换为Expanded小部件。 它将扩展ListView以适应Column中的可用空间。

Expanded(
  child: ListView(
     ...
)

Answer 2

最简单的方法是使用Column()包装您的ListView()小部件，并且使用媒体查询给定用户屏幕的高度，记住您还应该在列表中使用收缩包装为 true 并使用SingleChildScrollView()包装您的身体像这样：

...
 body: SingleChildScrollView(
...
  Container(
         height: MediaQuery.of(context).size.height,
        child: Column(
        children: [
   ///Your listview
      ListView(
      shrinkWrap: true,
     )
      ]
          
        )
    )
...
)