颤振布局:如何在Flutter中的Flex(或另一行)中放置一行？还使用Stack小部件

Question

我需要在一行中放入2个组合小部件:

组合小部件名为"boxText".我需要它两次,每个都在一个边框内有两个文本和一个TextFormField,如:

Stack
  Image and others
  Form
    Row or Flex or Whatever:
    +------------------------------+    +------------------------------+
    | Text  Text TextFormField     |    | Text Text  TextFormField     |
    +------------------------------+    +------------------------------+

我的代码(和眼泪):重要:只有在添加TextFormField时才会发生异常.

@override小部件构建(BuildContext context){

// Composed Widget
Widget boxText = new Container(
  decoration: new BoxDecoration(
    border: new Border.all(
      color: Colors.cyan[100],
      width: 3.0,
      style: BorderStyle.solid,
    ),
  ),
  margin: new EdgeInsets.all(5.0),
  padding: new EdgeInsets.all(8.0),
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      new Text(
        'Text',
        style: null,
      ),
      new Text(
        'Text',
        style: null,
      ),
      new TextFormField(
        decoration: const InputDecoration(
          hintText: '',
          labelText: 'label',
        ),
        obscureText: true,
      ),
    ],
  ),
);

return new Scaffold(
  key: _scaffoldKey,
  body: new Stack(
    alignment: AlignmentDirectional.topStart,
    textDirection: TextDirection.ltr,
    fit: StackFit.loose,
    overflow: Overflow.clip,
    children: <Widget>[

      new Container(
        color: Colors.red[200],
        margin: new EdgeInsets.only(
          left: MediaQuery.of(context).size.width * 0.05,
          right: MediaQuery.of(context).size.width * 0.05,
          top: MediaQuery.of(context).size.height * 0.4,
          bottom: MediaQuery.of(context).size.height * 0.1,
        ),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: new Form(
          key: _formKey,
          child: new ListView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            children: <Widget>[
              new Flex(
                direction: Axis.horizontal,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  boxText,
                  boxText,
                ],
              ),
            ],
          ),
        ),
      ),
    ],
  ),
    );
  }

如果可能的话,如何在不通过RENDERING LIBRARY的例外情况下使这些小部件工作

══╡通过渲染图书馆的例外情况╞═​​══════════════════════════════════════════════════════════════════════════════════════════════在performLayout()期间抛出了以下断言:RenderFlex子节点具有非零flex,但是输入宽度约束是无限制的.当行在父级中不提供有限宽度约束时,例如,如果它在水平可滚动条件下,它将尝试沿水平轴收缩包装其子项.在子项上设置flex(例如,使用Expanded)表示要扩展子项以在水平方向上填充剩余空间.这两个指令是互斥的.如果父级要收缩包装其子级,则子级不能同时扩展以适合其父级.考虑将mainAxisSize设置为MainAxisSize.min并使用FlexFit.loose适合灵活的子项(使用Flexible而不是Expanded).这将允许灵活的子节点将其自身的大小设置为小于它们将被强制占用的无限剩余空间,然后将使RenderFlex收缩包装子节点而不是扩展以适应父节点提供的最大约束.受影响的RenderFlex为:RenderFlex#4db4f relayoutBoundary = up8 NEEDS-LAYOUT NEEDS-PAINT创建者信息设置为:行←填充←DecorativeBox←填充←容器←Flex←RepaintBoundary - [<0>]←(其余的例外已删除.)

Answer 1

包裹你Container和你的TextFormField内部Flexible小部件.

Widget boxText = new Flexible(child: new Container(
      decoration: new BoxDecoration(
        border: new Border.all(
          color: Colors.cyan[100],
          width: 3.0,
          style: BorderStyle.solid,
        ),
      ),
      margin: new EdgeInsets.all(5.0),
      padding: new EdgeInsets.all(8.0),
      child: new Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[

          new Text(
            'Text',
            style: null,
          ),
          new Text(
            'Text',
            style: null,
          ),
          new Flexible (child: new TextFormField(
            decoration: const InputDecoration(
              hintText: '',
              labelText: 'label',
            ),
            obscureText: true,
          ),),
        ],
      ),
    ));