列占用的空间超出了 Flutter 中所需的空间

Question

我正在尝试构建一个列中的页面视图。页面视图将包含卡片。我希望页面视图的大小能够根据其内容（即卡片）动态变化，但我无法实现这一点。显然，卡中的列占用的空间超出了所需的空间。我已经和 flutter 检查员检查过，但我不明白为什么。任何帮助，将不胜感激。这是代码。

import 'package:cricket_app/util/colors.dart';
import 'package:flutter/material.dart';
import 'package:page_view_indicators/circle_page_indicator.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  PageController _controller = PageController(
    initialPage: 0,
  );
  final _currentPageNotifier = ValueNotifier<int>(0);
  final double _cardHeight = 200.0;
  final double _teamIconSize = 50.0;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: primaryColor,
        elevation: 0,
        // flexibleSpace: Container(
        //   decoration: BoxDecoration(
        //       gradient: LinearGradient(
        //           begin: Alignment.topLeft,
        //           end: Alignment.bottomRight,
        //           colors: <Color>[Colors.red, Colors.blue])),
        // ),
        centerTitle: true,
        title: Text(
          "CRICKET APP",
        ),
      ),
      body: Column(
        children: <Widget>[
          Flexible(
            child: Column(
              children: <Widget>[
                Flexible(
                  child: PageView(
                    controller: _controller,
                    children: <Widget>[
                      _buildMatchCard(context, _teamIconSize),
                      _buildMatchCard(context, _teamIconSize),
                      _buildMatchCard(context, _teamIconSize),
                    ],
                    onPageChanged: (int index) {
                      _currentPageNotifier.value = index;
                    },
                  ),
                ),
                CirclePageIndicator(
                  dotColor: primaryColor,
                  selectedDotColor: accentColor,
                  itemCount: 3,
                  selectedSize: 10.0,
                  currentPageNotifier: _currentPageNotifier,
                )
              ],
            ),
          ),
          Expanded(
            child: Container(
              child: Center(
                  child: Text(
                "News Section",
                style: TextStyle(fontSize: 20.0),
              )),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildMatchCard(BuildContext context, double _teamIconSize) {
    return Card(
      margin: EdgeInsets.all(10.0),
      elevation: 2.0,
      color: darkGreyColor,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      child: Container(
        child: Column(
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(5.0, 10.0, 5.0, 0),
              child: Text(
                "European Cricket Series, Stockholm, 11th Match",
                style: TextStyle(
                    fontSize: 18.0,
                    color: Colors.black,
                    fontWeight: FontWeight.w500),
                textAlign: TextAlign.center,
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(5.0),
              child: Text(
                "04:00 PM 22-Oct at Rajiv Ghandhi Stadium, Hyderabad",
                style: TextStyle(fontSize: 14.0),
                textAlign: TextAlign.center,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Container(
                          child: Image.asset(
                            'assets/icons/appIcon.jpg',
                            height: _teamIconSize,
                            width: _teamIconSize,
                          ),
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Text(
                          "WI",
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 18.0,
                              fontWeight: FontWeight.w500),
                        )
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "250/8",
                              style: TextStyle(
                                  fontSize: 24.0, color: Colors.black),
                            ),
                            Text("50 Over")
                          ],
                        ),
                      ),
                    )
                  ],
                ),
                Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      "Live",
                      style: TextStyle(
                          fontSize: 16.0,
                          color: Colors.red,
                          fontWeight: FontWeight.w500),
                    ),
                    Container(
                      width: 20.0,
                      height: 20.0,
                      margin: EdgeInsets.only(top: 5.0, bottom: 5.0),
                      decoration: new BoxDecoration(
                        color: accentColor,
                        shape: BoxShape.circle,
                      ),
                      child: Center(
                          child: Text(
                        "VS",
                        style: TextStyle(
                            fontSize: 12.0, fontWeight: FontWeight.w500),
                      )),
                    ),
                    Row(
                      children: <Widget>[
                        Container(
                          padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0),
                          color: Colors.red,
                          child: Text("56"),
                        ),
                        SizedBox(
                          width: 5.0,
                        ),
                        Container(
                          padding: EdgeInsets.fromLTRB(10.0, 3.0, 10.0, 3.0),
                          color: Colors.red,
                          child: Text("56"),
                        )
                      ],
                    ),
                    Container(
                      margin: EdgeInsets.all(5.0),
                      child: Text("Fav - IND"),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              "250/8",
                              style: TextStyle(
                                  fontSize: 24.0, color: Colors.black),
                            ),
                            Text("50 Over")
                          ],
                        ),
                      ),
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Image.asset(
                          'assets/icons/appIcon.jpg',
                          height: _teamIconSize,
                          width: _teamIconSize,
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Text(
                          "WI",
                          style: TextStyle(
                              color: Colors.black,
                              fontSize: 18.0,
                              fontWeight: FontWeight.w500),
                        )
                      ],
                    ),
                  ],
                ),
              ],
            ),
            Padding(
              padding: const EdgeInsets.all(4.0),
              child: Text(
                "INDIA needs 126 runs in 155 balls to win",
                style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
                textAlign: TextAlign.center,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

您应该根据官方文档设置适当的mainAxisSize

Column 的高度由 mainAxisSize 属性确定。如果 mainAxisSize 属性为 MainAxisSize.max，则 Column 的高度为传入约束的最大高度。如果 mainAxisSize 属性为 MainAxisSize.min，则 Column 的高度为子级高度之和（受传入约束

...
child: Column(
          mainAxisSize: MainAxisSize.  //MIN or MAX
          children: <Widget>[
            Padding(
...