flutter - RenderFlex 子级具有非零 flex，但传入的高度约束是无界的，已尝试灵活和扩展不起作用

Question

我有以下代码。我有谷歌

例如TextField inside of Row causes layout exception: Unable to calculate size .问题是在我的情况下是这样的

TextFormField( onChanged: (value) => contactNo = value,

我试过扩展，我试过灵活等都不起作用并给我错误。在这种情况下我还应该修复什么？我试过添加这个 child :SingleChildScrollView( 甚至这个 mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
然而同样的错误。

Widget _createForm(BuildContext context) {    
      return Scaffold(      
      key: _scaffoldKey,
      resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: false,
      backgroundColor: pagebackgroundColor,
      appBar: appBar(),
      drawer: Theme(
          data: Theme.of(context).copyWith(canvasColor: Colors.white),
          child: new ReusableWidgets().getDrawer('Sum',context)
      ),
        body: SafeArea(
                child: SingleChildScrollView(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    SizedBox(
                      height: 20.0,
                    ),

                    Row(
                      children: <Widget>[
                        RoundedCardDataNoColor(

                          child: Row( 
                            //mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.center,
                            children: <Widget>[              
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                        Row(
                                          crossAxisAlignment: CrossAxisAlignment.center,
                                          mainAxisAlignment: MainAxisAlignment.center,
                                          children: <Widget>[                            
                                            SizedBox(width: 5,),
                                            Text(
                                              "Total",
                                              style: plateStyle,
                                            ),

                                          ],
                                        ),

                                        SizedBox(height: 5,),

                                        Expanded(
                                          child:
                                          Row(
                                            crossAxisAlignment: CrossAxisAlignment.center,
                                            children: <Widget>[
                                                  TextFormField(
                                                  onChanged: (value) => contactNo = value,
                                                  keyboardType: TextInputType.phone,
                                                  validator: validateMobile,
                                                  maxLength: 10,
                                                  decoration: InputDecoration(
                                                    labelText: 'Contact No.',
                                                    //errorText: "Enter First Name",
                                                  ),
                                                ), 

                                            ],
                                           ),
                                        )
                                      ],
                              ),
                            ]
                          )
                        ),
                      ]
                    ),

这是完整的错误。

RenderFlex children have non-zero flex but incoming width constraints are unbounded. The relevant error-causing widget was Row RenderBox was not laid out: RenderFlex#03f25 relayoutBoundary=up16 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Column RenderBox was not laid out: RenderFlex#adff1 relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Row

从这里开始，它指向我创建的 round_card_data_nocolor 小部件

RenderBox was not laid out: RenderFlex#6e81b relayoutBoundary=up14 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Container RenderBox was not laid out: RenderPadding#88382 relayoutBoundary=up13 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Container RenderBox was not laid out: RenderDecoratedBox#f5086 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Row RenderBox was not laid out: RenderFlex#72dfe relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Card RenderBox was not laid out: RenderSemanticsAnnotations#16c58 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1687 pos 12: 'hasSize' The relevant error-causing widget was Padding

以下是小部件 RoundedCardDataNoColor 的完整代码:

    class RoundedCardDataNoColor extends StatelessWidget {
      // ---- props -----
      final Widget child;


      // --- constant view settings ----
      static const double radius = 10.0;
      static const double elevation = 5.0;
      static const innerPadding = const EdgeInsets.all(8.0);
      static const innerPaddingColor = const EdgeInsets.all(0.0);
      static const outerPadding = const EdgeInsets.all(0.0);
      static const margin = const EdgeInsets.fromLTRB(10, 5, 0, 5);

      const RoundedCardDataNoColor({
        Key key,
        this.child,
      }) : super(key: key);

      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: outerPadding,
          child: Card(
            margin: margin,
            elevation: elevation,
            clipBehavior: Clip.antiAlias,
            shape: roundShape,
            child: Row(children: <Widget>[
              new Container(
              padding: innerPadding,
              decoration: roundDecor,
              child: child ,
              ),
            ],)


          ),
        );
      }


      static const roundShape = const RoundedRectangleBorder(
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(radius),
          bottomLeft: Radius.circular(radius),
        ),
      );

      static const roundDecor = const BoxDecoration(
        color: Colors.white,
        borderRadius: const BorderRadius.only(
            topLeft: const Radius.circular(radius),
            bottomLeft: const Radius.circular(radius)),
      );
    }

Answer 1

ScrollView 没有定义高度约束，只有宽度约束。在您的第二个 Column 内看起来你正在定义一个 Expanded ，这意味着小部件将尝试通过高度约束垂直“无界”扩展。您可以尝试删除 Expanded看看是不是这样，或者给 RoundedCardDataNoColor 添加一个固定的高度