当拉伸容器时，BoxConstraints会强制要求无限高。

Question

我是Android开发的新手。我正在尝试使用行和列小部件来拉伸，纵向3个容器和横向3个容器。每次我添加 crossAxisAlignment: CrossAxisAlignment.stretch,在我的Row widget里面，我得到一个 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,
                      ),
                    ],
                  ),
                ),
              )
            ],
          )),
        ),
      ),
    );
  }
}