前端之家

  1. 首页
  2. 问答

将我的小部件放在Flutter中的列中会破坏一切

• 问答

作为一种锻炼，我正在尝试重新创建IMDb应用程序。我这样做是为了尽可能地学习某些东西，以使它们看起来应有的外观。列中的行中的列变得越来越复杂，我不确定我是否做错了什么，但是它的工作原理是这样的（请告诉我我的代码是否根本上是错误的）。

The Page,when they are not in a column

我尝试了很多事情，甚至在代码中有空列以及下面的文本和按钮，它也能很好地工作（例如，按钮位于文本旁边，而不是应该位于文本下方，但是不会崩溃）

被/////包围的部分是“问题区域”，我不知道上下文需要什么


Card(
    color: (HSVColor.fromAHSV(1.0,0.0,0.22)).toColor(),child: Column(children: <Widget>[
      Stack(
        children: <Widget>[
          ShaderMask(
            shaderCallback: (rect) {
              return LinearGradient(
                begin: Alignment.topCenter,end: Alignment.bottomCenter,colors: [Colors.black,Colors.transparent],).createShader(
                  Rect.fromLTRB(0,200,rect.width,rect.height));
            },blendmode: Blendmode.dstIn,child: Image.asset("assets/movies/" +
                _movie.getImagePath() +
                '/banner1.bmp'),),Align(
            alignment: FractionalOffset.bottomLeft,child: Padding(
              padding: EdgeInsets.only(bottom: 10.0),child: Column(children: <Widget>[
                RichText(
                  textAlign: TextAlign.left,text: TextSpan(
                    text: _movie.getName() + '\n\n',style:
                        TextStyle(color: Colors.white,fontSize: 25),children: <TextSpan>[],]),)
        ],Align(
          alignment: Alignment.bottomLeft,child: Text(
              "\n " +
                  _movie.getReleaseYear() +
                  "    " +
                  _movie.getDuration().toString() +
                  "min     Directed by: " +
                  _movie.getDirector(),textAlign: TextAlign.left,style: TextStyle(color: Colors.white70))),Padding(
        padding: EdgeInsets.all(7.0),Row(
        crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
          Image.asset(
              "assets/movies/" +
                  _movie.getImagePath() +
                  '/poster.bmp',height: 240,width: 160),Padding(
            padding: EdgeInsets.all(4.0),/////////////////////////////////////////////////////
          Column(
            children: <Widget>[],Expanded(
              child: Align(
                  alignment: Alignment.topLeft,child: Text(
                    _movie.getDescription(),style: TextStyle(color: Colors.white),))),RaisedButton(
            onpressed: () {},textColor: Colors.white,color: Colors.blue,)
/////////////////////////////////////////////////////
        ],)
    ])),

您可能会看到，我在这里所做的就是将Expanded and Button拖放到Column中。

Card(
    color: (HSVColor.fromAHSV(1.0,/////////////////////////////////////////////////////
          Column(children: <Widget>[

            Expanded(
                child: Align(
                    alignment: Alignment.topLeft,child: Text(
                      _movie.getDescription(),RaisedButton(
              onpressed: () {},)
          ],/////////////////////////////////////////////////////
        ],

然后我收到22条错误消息

════════ (2) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#46c16 relayoutBoundary=up10 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Column file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:28:22
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (3) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#1ecab relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (4) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#bf879 relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (5) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#23d9c relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (6) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#d5fb8 relayoutBoundary=up6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (7) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#c42f6 relayoutBoundary=up5 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (8) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#af491 relayoutBoundary=up4 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (9) Exception caught by rendering library ═════════════════════════════════════════════════
RenderBox was not laid out: RenderPadding#82ff0 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (10) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#d9b34 relayoutBoundary=up2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (11) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#f2c36 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (12) Exception caught by rendering library ════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (13) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#1ecab relayoutBoundary=up9 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (14) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#bf879 relayoutBoundary=up8 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (15) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#23d9c relayoutBoundary=up7 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (16) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#d5fb8 relayoutBoundary=up6 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (17) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#c42f6 relayoutBoundary=up5 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (18) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#af491 relayoutBoundary=up4 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (19) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderPadding#82ff0 relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Card file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:26:11
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (20) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#d9b34 relayoutBoundary=up2 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (21) Exception caught by rendering library ════════════════════════════════════════════════
RenderBox was not laid out: RenderFlex#f2c36 relayoutBoundary=up1 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

════════ (22) Exception caught by rendering library ════════════════════════════════════════════════
The method '>' was called on null.
Receiver: null
Tried calling: >(1e-10)
User-created ancestor of the error-causing widget was: 
  Scaffold file:///C:/Users/xxx/dev/flutter_testapp2/lib/movie_detailed_widget.dart:12:12
════════════════════════════════════════════════════════════════════════════════════════════════════

我认识一个会颤动的人，他们可能会说：“哦，这不是很明显，看着错误消息巧妙地表明……”，但是我对颤动非常陌生，这对我来说毫无意义，尤其是为什么这种情况可能不会解决

因为我实际上只是将2个小部件放入该列中，并且没有错误消息，所以我只是希望它能够工作。我尝试过很多次，改变了一些东西，但是除非它在专栏中，否则它总是有效的。

编辑1：我设法使它不崩溃，使​​我无法幸福的唯一方法实际上是使事情无法进行的“扩展”。没有它：很好

编辑2：更多试验和错误。因此，我不能使用弹性。有或没有对齐，它都无法工作。它没有弹性就可以工作，但是随后屏幕溢出。我不知道该怎么办，老实说，我比以前更加困惑。灵活和扩展都不起作用。我在做什么错

shao1014 回答：将我的小部件放在Flutter中的列中会破坏一切

您所需要做的就是用column小部件包裹罪魁祸首flexible。

代码：

Card(
          color: (HSVColor.fromAHSV(1.0,0.0,0.22)).toColor(),child: Column(children: <Widget>[
            Stack(
              children: <Widget>[
                ShaderMask(
                  shaderCallback: (rect) {
                    return LinearGradient(
                      begin: Alignment.topCenter,end: Alignment.bottomCenter,colors: [Colors.black,Colors.transparent],).createShader(
                        Rect.fromLTRB(0,200,rect.width,rect.height));
                  },blendMode: BlendMode.dstIn,child: Image.network('https://placeimg.com/640/480/tech'),),Align(
                  alignment: FractionalOffset.bottomLeft,child: Padding(
                    padding: EdgeInsets.only(bottom: 10.0),child: Column(children: <Widget>[
                      RichText(
                        textAlign: TextAlign.left,text: TextSpan(
                          text: 'Dummy Movie' + '\n\n',style: TextStyle(color: Colors.white,fontSize: 25),children: <TextSpan>[],]),)
              ],Align(
                alignment: Alignment.bottomLeft,child: Text(
                    "\n " +
                        '2019' +
                        "    " +
                        '2h 30 Min' +
                        "min     Directed by: " +
                        'Anmol Majhail',textAlign: TextAlign.left,style: TextStyle(color: Colors.white70))),Padding(
              padding: EdgeInsets.all(7.0),Row(
              crossAxisAlignment: CrossAxisAlignment.start,mainAxisSize: MainAxisSize.min,children: <Widget>[
                Image.network(
                  'https://placeimg.com/640/480/tech',height: 240,width: 160,alignment: Alignment.topCenter,Padding(
                  padding: EdgeInsets.all(4.0),/////////////////////////////////////////////////////
                Flexible(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[
                      Align(
                          alignment: Alignment.topLeft,child: Text(
                            'This is Dummy Description. Just to fill up the space.',style: TextStyle(color: Colors.white),)),RaisedButton(
                        onPressed: () {},textColor: Colors.white,color: Colors.blue,)
                    ],/////////////////////////////////////////////////////
              ],)
          ]))

enter image description here

flutterflutter-layoutwidget
本文链接：https://www.f2er.com/3143220.html

大家都在问