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

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作为参数，可用于帮助根据大小动态渲染小部件。

让我们构建一个简单的小部件示例，如果父宽度大于 200 像素，则呈现“大”；如果父宽度小于或等于该宽度，则呈现“小”。

var container = 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) { 
        return Text(constraints.maxWidth > 200 ? 'BIG' : 'SMALL');        
      }
    ),
  );

Answer 2

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

示例：

 child: Container(
     width: double.maxFinite,
   )

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

您可以尝试 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 5

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

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),
    ),

  ]),
)

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