BoxConstraints在拉伸容器时会强制将高度调高

Question

我是Android开发的新手。我正在尝试使用行和列窗口小部件拉伸，垂直拉伸3个容器，水平拉伸3个容器。每次我在“行”小部件中添加crossAxisAlignment: CrossAxisAlignment.stretch,时，都会出现一个 BoxConstraints强制无限高度错误。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multichild Container Test'),
        ),
        body: SafeArea(
          child: Container(
            child: Column(
              children: <Widget>[
                Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.pink.shade900,
                      ),

                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.green.shade900,
                      ),

                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.deepPurple.shade900,
                      ),
                    ],
                  ),
                ),

                Container(
                  child: Row(
                    //crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.pink.shade900,
                      ),

                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.green.shade900,
                      ),

                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.deepPurple.shade900,
                      ),
                    ],
                  ),
                )


              ],
            )
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以在下面使用复制粘贴运行完整代码
您可以使用Expanded和flex为Container提供高度
代码段

Expanded(
            flex: 1,

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Multichild Container Test'),
        ),
        body: SafeArea(
          child: Container(
              child: Column(
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.pink.shade900,
                      ),
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.green.shade900,
                      ),
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.deepPurple.shade900,
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Container(
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: <Widget>[
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.pink.shade900,
                      ),
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.green.shade900,
                      ),
                      Container(
                        width: 60.0,
                        height: 100.0,
                        child: Text('Container 1'),
                        color: Colors.deepPurple.shade900,
                      ),
                    ],
                  ),
                ),
              )
            ],
          )),
        ),
      ),
    );
  }
}