95

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

例如：

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 中执行此操作的最佳方法是什么？

4

6 回答 6

163

您将需要使用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');
      }
    }
  ),
);
于 2017-01-09T22:56:12.693 回答
22

想要一个容器以它的百分比占用部分可用空间（意味着一半的父小部件等......）？然后使用 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。

于 2020-10-05T10:01:30.227 回答
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 
    ],),
  )
)
于 2020-11-17T11:09:42.660 回答
1

你可以试试 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()), 
);
于 2021-05-05T11:44:31.937 回答
1

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

例子：

 child: Container(
     width: double.maxFinite,
   )
于 2021-05-23T08:02:41.523 回答
-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),
    ),

  ]),
)

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

于 2021-02-24T11:55:39.043 回答