Question

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

当为父窗口小部件提供恒定高度时，布局将按预期呈现。但是，由于我删除了恒定高度的布局，并没有达到我想要的Listview的预期，因此我不应该为将用作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中的一项，则不能让listView滚动的同一轴上有无限大的尺寸。让我解释：当前，您没有在height小部件上定义任何cell()，如果您单独使用它会很好。像这样：

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),
        ],
      )
    );
  }
}

Answer 3

您的ListView必须位于Flexible内部。列内的Flexible将为ListView设置最大可用高度。 ListView需要距离父级一定的高度，Flexible将基于max。可用空间。

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

Answer 4

一种不错的方法，它可以与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
)

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

4 个答案: