Column 内的扩展小部件未扩展，而是不可见

Question

我正在尝试在 Column 小部件内扩展小部件，但无法使其扩展。

当给父小部件固定高度时，布局将按预期呈现。但是当我删除恒定高度时，布局并不像我想用它制作 Listview 的预期那样，我不应该为将用作列表视图项的小部件提供恒定高度。

下面是我的布局代码。

 import 'package:flutter/material.dart';

 void main() {

 runApp(MaterialApp(
title: 'layout test',
home: Layout_test_class(),
));

 }



class Layout_test_class extends StatelessWidget {

Widget cell() {

return Container(
  color: Colors.yellow,
//      height: 200, after un commenting this will work. but i want to make it without this

  child: Row(
    crossAxisAlignment: CrossAxisAlignment.end,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[

      Expanded(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[

            Expanded(
              child: Container(
                color: Colors.green,
                child: Text('apple z'),
              ),
            ),

            Container(
              color: Colors.red,
              child:Text('apple 2'),
            )
          ],
        ),
      ),

      Column(
        children: <Widget>[
          Container(
            color: Colors.black,
            width: 200,
            height: 200,
          ),
        ],
      ),

    ],
  ),

);

}

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
  appBar: AppBar(
    title: Text('title'),
  ),
  body: Center(
   child: ListView(
     children: <Widget>[
       cell(),
     ],
   )
  ),
);
}

}

以下是我预期的输出屏幕截图。

Answer 1

尝试用IntrinsicHeight 包装你的容器

return IntrinsicHeight(
        Container(
          color: Colors.yellow
          child: ...
        )
)

Answer 2

您的ListView 需要在Flexible 内。列内的Flexible 将为ListView 设置可用的最大高度。 ListView 需要从父级开始的有限高度，Flexible 将根据最大值提供。可用空间。

Column(
  children: <Widget>[
    Flexible(
      child: ListView.builder(...)
    ),
    Container(
      color: Colors.red,
      child:Text('apple 2'),
    ),
  ],
)

Answer 3

这样做的一个好方法，就是使用MediaQuery，高度和宽度。

让我解释一下，如果您希望小部件具有决定屏幕的最大高度，您可以这样设置：

Container(
height: MediaQuery.of(context).size.height // Full screen size
)

您可以通过除以 2、3、400 来操作它，即您想要的值。

宽度也一样

Container(
width: MediaQuery.of(context).size.width // Can divide by any value you want here
)

Answer 4

实际上恰恰相反，如果您打算将其用作listView 中的一个项目，您不能让listView 在同一轴上滚动无限大小。 让我解释： 目前您没有在您的cell() 小部件上定义任何height，如果您单独使用它就可以了。像这样：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'layout test',
    home: Layout_test_class(),
  ));
}

class Layout_test_class extends StatelessWidget {
  Widget cell() {
    return Container(
      color: Colors.yellow,
      //height: 250, after un commenting this will work. but i want to make it without this

      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: Text('apple z'),
                  ),
                ),
                Container(
                  color: Colors.red,
                  child: Text('apple 2'),
                )
              ],
            ),
          ),
          Column(
            children: <Widget>[
              Container(
                color: Colors.black,
                width: 200,
                height: 200,
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: cell(),
    );
  }
}

但是将它与listView 一起使用，您必须定义一个height。只要有一些内容要滚动，listView 就会滚动。现在它就像你给它无限的内容一样，所以它会无限滚动。相反，Flutter 并没有构建它。

实际上可以为您的容器（作为一个项目）定义一个全局大小。你甚至可以使用这样的参数为每个定义一个特定的大小：

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'layout test',
    home: Layout_test_class(),
  ));
}

class Layout_test_class extends StatelessWidget {
  Widget cell(double height) {
    return Container(
      color: Colors.yellow,
      height: height, //after un commenting this will work. but i want to make it without this

      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: Text('apple z'),
                  ),
                ),
                Container(
                  color: Colors.red,
                  child: Text('apple 2'),
                )
              ],
            ),
          ),
          Column(
            children: <Widget>[
              Container(
                color: Colors.black,
                width: 200,
                height: 200,
              ),
            ],
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('title'),
      ),
      body: ListView(
        children: <Widget>[
          cell(250.0),
          cell(230.0),
          cell(300.0),
        ],
      )
    );
  }
}