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

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”，如果父宽度小于或等于 200px，则呈现“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是一个小部件（一个container ），它让它的孩子有一个widthFactor和一个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

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

我有一个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 
    ],),
  )
)

Answer 4

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

例子：

 child: Container(
     width: double.maxFinite,
   )

Answer 5

你可以试试 IntrinsicHeight 小部件：

https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

对我来说，这是最简单的解决方案。 但它似乎很贵，所以你应该尽可能避免它

var container = Container(
height: 200.0, // Imagine this might change
width: 200.0, // Imagine this might change

child: IntrinsicHeight(
      child: Container()), 
);

Answer 6

要根据父级动态设置小部件大小，请使用以下代码：

Container(
  color: Colors.red,
  alignment: Alignment.center,
  child: Wrap(children: <Widget>[

    GestureDetector(
      child: Text(
        'Button',
        style: TextStyle(
            color: Color(0xff0079BF), fontSize:20),
      ),
      onTap: () {


        Navigator.pushReplacementNamed(context, '/signin');
      },
    ),


    Text(
      'You have pushed the button this many times:',
      style: TextStyle(fontSize: 50),
    ),

  ]),
)

我希望这个解决方案对你有用。