android-layout - BoxConstraints 在拉伸容器时强制使用无限高

Question

我是 Android 开发的新手。我正在尝试使用行和列小部件垂直拉伸 3 个容器和水平拉伸 3 个容器。每次我crossAxisAlignment: CrossAxisAlignment.stretch,在我的 Row 小部件中添加时，我都会得到一个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,
                      ),
                    ],
                  ),
                )


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

标签： android-layoutflutterflutter-layout

Answer 1

您可以在下面使用复制粘贴运行完整代码
您可以使用Expandedandflex为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,
                      ),
                    ],
                  ),
                ),
              )
            ],
          )),
        ),
      ),
    );
  }
}