首页 文章

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

提问于
浏览
1

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

注意:组合小部件被命名为“boxText”我需要它两次,每个都在一个Border内,两个Text和一个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,但是输入宽度约束是无限制的 . 当行在父级中不提供有限宽度约束时,例如,如果它在水平可滚动中,它将尝试沿水平轴收缩包装其子级 . 为孩子设置弹性(例如使用Expanded)表示孩子要扩展以在水平方向上填充剩余空间 . 这两个指令是互斥的 . 如果父级要收缩包装其子级,则子级不能同时扩展以适合其父级 . 考虑将mainAxisSize设置为MainAxisSize.min并使用FlexFit.loose适合灵活的子项(使用Flexible而不是Expanded) . 这将允许灵活的子项将其自身的大小设置为小于它们将被强制采用的无限剩余空间,然后将使RenderFlex收缩包装子项而不是扩展以适应父项提供的最大约束 . 受影响的RenderFlex为:RenderFlex#4db4f relayoutBoundary = up8 NEEDS-LAYOUT NEEDS-PAINT创建者信息设置为:行←填充←DecorativeBox←填充←容器←Flex←RepaintBoundary - [<0>]←NotificationListener←KeepAlive←AutomaticKeepAlive← SliverList←SliverPadding←⋯提供无限宽度约束的最近祖先是:RenderFlex#31897 relayoutBoundary = up4 NEEDS-LAYOUT NEEDS-PAINT创建者:Flex←RepaintBoundary - [<0>]←NotificationListener←KeepAlive←AutomaticKeepAlive←SliverList←SliverPadding←Viewport ←_ScrollableScope←IgnorePointer- [GlobalKey#d9a15]←监听器←_GestureSemantics←⋯parentData :(可以使用大小)约束:BoxConstraints(w = 889.6,0.0 <= h <=无穷大)大小:MISSING方向:水平mainAxisAlignment:start mainAxisSize: max crossAxisAlignment:center textDirection:ltr verticalDirection:downSee also:https://flutter.io/layout/如果此消息没有帮助你d确定问题,请考虑使用debugDumpRenderTree():https://flutter.io/debugging/#rendering-layer http://docs.flutter.io/flutter/rendering/debugDumpRenderTree.html如果以上都不足以解决问题这个问题,请不要犹豫,提交一个错误:https://github.com/flutter/flutter/issues/new当抛出异常时,这就是堆栈:#0 RenderFlex.performLayout . (包:flutter / src / rendering / flex.dart:690:11)#1 RenderFlex.performLayout(包:flutter / src / rendering / flex.dart:711:10)#2 RenderObject.layout(包:flutter / src /rendering/object.dart:1969:7)#3 RenderPadding.performLayout(包:flutter / src / rendering / shifted_box.dart:197:11)#4 RenderObject.layout(包:flutter / src / rendering / object.dart :1969:7)#5 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#6 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)# 7 RenderPadding.performLayout(包:flutter / src / rendering / shifted_box.dart:197:11)#8 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#9 RenderFlex.performLayout(包:flutter / src / rendering / flex.dart:737:15)#10 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#11 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering /proxy_box.dart:107 :13)#12 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#13 RenderSliverList.performLayout(包:flutter / src / rendering / sliver_list.dart:164:27)#14 RenderObject .layout(package:flutter / src / rendering / object.dart:1969:7)#15 RenderSliverPadding.performLayout(package:flutter / src / rendering / sliver_padding.dart:182:11)#16 RenderObject.layout(package:flutter /src/rendering/object.dart:1969:7)#17 RenderViewportBase.layoutChildSequence(包:flutter / src / rendering / viewport.dart:286:13)#18 RenderViewport._attemptLayout(包:flutter / src / rendering / viewport .dart:979:12)#19 RenderViewport.performLayout(包:flutter / src / rendering / viewport.dart:903:20)#20 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7 )#21 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#22 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#23 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#24 RenderObject.layout(package:flutter / src /rendering/object.dart:1969:7)#25 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#26 RenderObject.layout(package:flutter / src / rendering / object.dart :1969:7)#27 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#28 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)# 29 RenderConstrainedBox.performLayout(包:flutter / src / rendering / proxy_box.dart:257:13)#30 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#31 RenderPadding.performLayout(包:flutter / src / rendering / shifted_box.dart:197:11)#32 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#33 Re nderStack.performLayout(package:flutter / src / rendering / stack.dart:466:15)#34 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#35 MultiChildLayoutDelegate.layoutChild(package: flutter / src / rendering / custom_layout.dart:124:11)#36 _ScaffoldLayout.performLayout(package:flutter / src / material / scaffold.dart:91:7)#37 MultiChildLayoutDelegate._callPerformLayout(package:flutter / src / rendering / custom_layout.dart:194:7)#38 RenderCustomMultiChildLayoutBox.performLayout(package:flutter / src / rendering / custom_layout.dart:338:14)#39 RenderObject.layout(package:flutter / src / rendering / object.dart:1969: 7)#40 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#41 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#42 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin . performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#43 _RenderCustomClip.performLayout(package:fl utter / src / rendering / proxy_box.dart:1005:24)#44 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#45 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#46 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#47 RenderStack.performLayout(package:flutter / src / rendering / stack.dart:466: 15)#48 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#49 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#50 RenderObject . layout(package:flutter / src / rendering / object.dart:1969:7)#51 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#52 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#53 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_bo x.dart:107:13)#54 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#55 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107: 13)#56 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#57 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(包:flutter / src / rendering / proxy_box.dart:107:13)#58 RenderOffstage . performLayout(package:flutter / src / rendering / proxy_box.dart:2749:26)#59 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#60 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#61 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#62 RenderStack.performLayout(package:flutter / src / rendering / stack . dart:466:15)#63 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#64 RenderBox&RenderObjectWithChildMixin&RenderProxyBox Mixin.performLayout(包:flutter / src / rendering / proxy_box.dart:107:13)#65 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#66 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(包: flutter / src / rendering / proxy_box.dart:107:13)#67 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#68 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#69 RenderObject.layout(package:flutter / src / rendering / object.dart:1969:7)#70 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107: 13)#71 RenderObject.layout(包:flutter / src / rendering / object.dart:1969:7)#72 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout(package:flutter / src / rendering / proxy_box.dart:107:13)#73 RenderObject . 布局(包:flutter / src / rendering / object.dart:1969:7)#74 RenderView.performLayout(包:flutter / src / rendering / view.dart:142:13)#75 RenderObject._layoutWithoutResize(包:flutter / src / rendering / object.dart:1844:7)#76 PipelineOwner.flushLayout(包:flutter / src) /rendering/object.dart:1133:18)#77 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding.drawFrame(package:flutter / src / rendering / binding.dart:262:19)#78 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding&WidgetsBinding.drawFrame(package:flutter / src / widgets / binding.dart :581:22)#79 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding._handlePersistentFrameCallback(package:flutter / src / rendering / binding.dart:200:5)#80 BindingBase&SchedulerBinding._invokeFrameCallback(package:flutter / src / scheduler / binding.dart:713:15)# 81 BindingBase&SchedulerBinding.handleDrawFrame(包:flutter / src / scheduler / binding.dart:649:9)#82 BindingBase&SchedulerBinding&GestureBinding&ServicesBinding&RendererBinding.scheduleWarmUpFrame . (包:flutter / src / rendering / binding.dart:28:20)#84 _Timer._runTimers(dart:isolate-patch / dart:isolate / timer_impl.dart:367)#85 _Timer._handleMessage(dart:isolate-patch /dart:isolate/timer_impl.dart:401)#86 _RawReceivePortImpl._handleMessage(dart:isolate-patch / dart:isolate / isolate_patch.dart:163)触发异常时正在处理以下RenderObject:RenderFlex#4db4f relayoutBoundary = up8 NEEDS-LAYOUT NEEDS-PAINT创建者:行←填充←装饰箱←填充←容器←Flex←重绘边界 - [<0>]←NotificationListener←KeepAlive←AutomaticKeepAlive←SliverList←SliverPadding←⋯parentData:offset = Offset(0.0,0.0) (可以使用大小)约束:BoxConstraints(无约束)大小:MISSING方向:水平mainAxisAlignment:start mainAxisSize:max crossAxisAlignment:start textDirection:ltr verticalDirection:down此RenderObject具有以下后代(显示深度为5):RenderParagraph#ef986 NEEDS -layout NEEDS-PAINT RenderConstrainedBox#4a834 NEEDS-LAYOUT NEEDS-PAINT RenderSemanticsGestureHandler#272e2 NEEDS-LAYOUT NEEDS-PAINT RenderPointerListener#38266 NEEDS-LAYOUT NEEDS-PAINT RenderConstrainedBox#5ca9f NEEDS-LAYOUT NEEDS-PAINT RenderStack#7c271 NEEDS-LAYOUT NEEDS-PAINT RenderTransform# bf3b4 NEEDS-LAYOUT NEEDS-PAINT RenderOpacity#98951需要 - 布局需要 - 涂层RenderPadding#78af4需要 - 布局需要 - 涂层═══════════════════════════════ ══════════════════════════════════════════════════抛弃另一个异常:'package:flutter / src / rendering / box.dart':断言失败:1433行pos 12:'hasSize':不是真的 . 引发了另一个异常:'package:flutter / src / rendering / box.dart':断言失败:第1433行pos 12:'hasSize':不是真的 . 引发了另一个异常:'package:flutter / src / rendering / box.dart':断言失败:第1433行pos 12:'hasSize':不是真的 . 引发了另一个异常:'package:flutter / src / rendering / box.dart':断言失败:第1433行pos 12:'hasSize':不是真的 . 引发了另一个异常:'package:flutter / src / rendering / sliver_multi_box_adaptor.dart':断言失败:第458行第12行:'child.hasSize':不是真的 . 抛出了另一个异常:NoSuchMethodError:在null上调用了getter'rollExtent' . 引发了另一个异常:NoSuchMethodError:方法'debugAssertIsValid'在null上调用 . 引发了另一个异常:NoSuchMethodError:在null上调用getter'visible' . 抛出另一个异常:NoSuchMethodError:在null上调用getter'paintExtent' .

谢谢 .

1 回答

  • 5

    Container 和_384132包裹在一个 Flexible 小部件中 .

    enter image description here

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

相关问题