如何根据父级的大小布局小部件？

Question

假设您有一个可能具有可变大小的父窗口小部件.

例如:

var container = new Container(
   height: 200.0, // Imagine this might change
   width: 200.0, // Imagine this might change
   // Imagine content in this container will 
   // depend on the parent container
   child: new Container(), 
);

也许你想让父容器的子进程根据它给出的大小来呈现不同的东西.

想想响应式设计断点,如果宽度超过X则使用此布局,如果宽度在X下使用该布局.

在Flutter中做到这一点的最佳方法是什么？

Answer 1

您将需要使用LayoutBuilder小部件,该小部件将在布局时构建并提供父小部件的约束.

的LayoutBuilder在需要build()其具有标准功能BuildContext与沿BoxConstraints作为参数,可以用来帮助动态地呈现基于尺寸的小部件.

让我们构建一个小部件的简单示例,如果父宽度大于200px,则呈现"LARGE";如果父宽度小于或等于父宽度,则呈现"SMALL".

var container = new Container(
  // Toggling width from 100 to 300 will change what is rendered
  // in the child container
  width: 100.0,
  // width: 300.0
  child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if(constraints.maxWidth > 200.0) {
        return new Text('BIG');
      } else {
        return new Text('SMALL');
      }
    }
  ),
);

Answer 2

想要一个容器以百分比形式占用可用空间的一部分（意味着父小部件的一半等......）？然后使用 FractionallySizedBox

相对于其父级调整小部件的大小

FractionallySizedBox是一个小部件 (a container)，它让它的孩子有 awidthFactor和 a heightFactor。您可以将其视为一种比例值。因此，如果我们想要有一个容器，将可用空间的一半horizontally和vertically，我们会做到以下几点：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FractionallySizedBox"),
      ),
      body: FractionallySizedBox(
        widthFactor: 0.5,
        heightFactor: 0.5,
        child: Container(
          // this container won't be larger than
          // half of its parent size
        ),
      ),
    );
  }

将其子级调整为总可用空间的一小部分的小部件。有关布局算法的更多详细信息，请参阅RenderFractionallySizedOverflowBox。

Answer 3

将小部件放入容器中并将其宽度和/或高度设置为double.maxFinite

例子：

 child: Container(
     width: double.maxFinite,
   )

Answer 4

所以我遇到了一个有趣的情况，我的父母孩子根据内容（包含描述的文本）动态增加大小。此父小部件以只读模式显示内容，但此解决方案也可以解决其他问题以及动态增加文本字段高度的问题。

我有一个height variable和GlobalKey。在initState 我使用的小部件中SchedulerBinding，它addPostFrameCallback 在布局构建后运行。

globalKey 被分配给我们需要其子级高度的任何父级小部件。

double height = 0.0;
GlobalKey _globalKey = GlobalKey();

  @override
  void initState() {
    SchedulerBinding.instance.addPostFrameCallback((timeStamp) {
      height = _globalKey.currentContext.size.height;
      print('the new height is $height');
      setState(() {});
    });
    super.initState();
  }

其余代码如下所示

// this parent having dynamic height based on content 
Container(
  width: 100.0,
  key: _globalKey,
  child: Container(
    width: 100.0,
    child: Row(children: [  ///  you can have column as well or any other widget. 
      Container(child: ...),
      Container(height: height,), ///this widget will take height from parent 
    ],),
  )
)