flutter - 列占用的空间超过 Flutter 所需的空间

Question

我正在尝试构建列中的页面 View 。页面 View 将保存卡片。我希望页面 View 的大小对其内容(即卡片)是动态的，但我无法实现。显然，卡片中的列占用的空间比需要的多。我已经用 flutter inspector 检查过它，但我不明白为什么。任何帮助，将不胜感激。这是代码。

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

您应该根据oficial docs设置合适的ma​​inAxisSize

The height of the Column is determined by the mainAxisSize property. If the mainAxisSize property is MainAxisSize.max, then the height of the Column is the max height of the incoming constraints. If the mainAxisSize property is MainAxisSize.min, then the height of the Column is the sum of heights of the children (subject to the incoming constraints

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