Flutter:在布局期间给定了一个无限大小的对象

25

我正在解决一个问题,错误提示为“在布局期间对象被赋予了无限大小”,并且“这可能意味着它是一个渲染对象,试图尽可能地变大,但它被放置在另一个允许其子元素选择自己大小的渲染对象中。”

我知道这意味着什么,但不知道如何在解决这个问题的同时保持当前的小部件树响应式(在运行时呈现,因此对于前端用户似乎没有问题)。当前我不设置某些东西的大小,以保持其响应式,并且希望避免尽可能硬编码小部件的大小。非常感谢任何帮助或指向正确方向的指针 :)

这是我的当前代码:

    class EditArtikel extends StatefulWidget {
  final String path;

  EditArtikel({this.path});

  @override
  _EditArtikelState createState() => _EditArtikelState(path: path);
}

class _EditArtikelState extends State<EditArtikel> {
  final String path;

  _EditArtikelState({this.path});

  final titleController = TextEditingController();
  final subtitleController = TextEditingController();
  final authorController = TextEditingController();
  final textController = TextEditingController();

  File imageFile;

  List<DropdownMenuItem<dynamic>> dropdownMenuItemFromList() {
    List<DropdownMenuItem<dynamic>> itemsList = [];
    for (var i = 1; i < currentTags.length; i++) {
      itemsList.add(new DropdownMenuItem(
        child: Text(currentTags[i]),
        value: currentTags[i],
      ));
    }
    return itemsList;
  }

  var _selectedValue = "";

  @override
  Widget build(BuildContext context) {
    final isAdmin = Provider.of<bool>(context);
    var pathElements = path.split('/');
    final String artikelID = pathElements[3];
    List<DropdownMenuItem<dynamic>> items = dropdownMenuItemFromList();

    if (isAdmin == true) {
      return LayoutBuilder(
        builder: (context, constraint) {
          return GlobalScaffold(
            body: Container(
              height: constraint.maxHeight,
              child: SingleChildScrollView(
                child: StreamBuilder<ArtikelData>(
                    stream:
                        DatabaseService(pathID: artikelID).artikelByArtikelID,
                    builder: (context, snapshot) {
                      if (snapshot.hasData) {
                        titleController.text == ""
                            ? titleController.text = snapshot.data.title
                            : titleController.text;

                        subtitleController.text == ""
                            ? subtitleController.text = snapshot.data.subtitle
                            : subtitleController.text;

                        authorController.text == ""
                            ? authorController.text = snapshot.data.author
                            : authorController.text;

                        textController.text == ""
                            ? textController.text = snapshot.data.text
                            : textController.text;

                        _selectedValue == ""
                            ? _selectedValue =
                                currentTags.contains(snapshot.data.tags)
                                    ? snapshot.data.tags
                                    : currentTags[1]
                            : _selectedValue = _selectedValue;

                        FirebaseStorageImage fbImage = new FirebaseStorageImage(
                          fileName: artikelID,
                          storageLocation: fbRefArtiklarImages,
                        );

                        return Container(
                          color: primaryColor,
                          padding: EdgeInsets.symmetric(
                              horizontal: 20, vertical: 15),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  GradientHeading(
                                    large: true,
                                    text: "Redigera artikel",
                                  ),
                                  SizedBox(height: 15),
                                  CustomTextFormField(
                                    labelText: "Rubrik",
                                    controller: titleController,
                                  ),
                                  CustomTextFormField(
                                    labelText: "Underrubrik",
                                    controller: subtitleController,
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(bottom: 7),
                                    child: DropdownButtonFormField(
                                      decoration: customInputDecoration("Tags"),
                                      value: _selectedValue,
                                      isDense: true,
                                      onChanged: (value) {
                                        setState(() {
                                          _selectedValue = value;
                                        });
                                      },
                                      items: items,
                                    ),
                                  ),
                                  CustomTextFormField(
                                    labelText: "Skriven av",
                                    controller: authorController,
                                  ),
                                  CustomTextFormField(
                                    labelText: "Text",
                                    multiline: true,
                                    controller: textController,
                                  ),
                                  NormalButton(
                                    text: "Ladda upp ny bild",
                                    outlined: true,
                                    outlinedBgColor: primaryColor,
                                    onPressed: () async {
                                      FocusScope.of(context).unfocus();
                                      imageFile = await ChooseImage()
                                          .chooseImageFromGallery();
                                      setState(() {});
                                    },
                                  ),
                                  ConditionalBuilder(
                                    condition: imageFile == null,
                                    ifTrue: NormalButton(
                                      text: "Ta bort originalbild",
                                      shouldOverideColor: true,
                                      overriddenColor: redWarningColor,
                                      onPressed: () async {
                                        FocusScope.of(context).unfocus();
                                        showDialog(
                                          context: context,
                                          barrierDismissible: true,
                                          builder: (_) => AlertDialog(
                                            content: Text(
                                                "Vill du radera originalbilden?"),
                                            actions: <Widget>[
                                              FlatButton(
                                                child: Text("Avbryt"),
                                                onPressed: () {
                                                  Navigator.of(context).pop();
                                                },
                                              ),
                                              FlatButton(
                                                child: Text("Radera"),
                                                onPressed: () async {
                                                  await StorageService()
                                                      .deleteArtikelImageToStorage(
                                                          artikelID);
                                                  setState(() {});
                                                  Navigator.of(context).pop();
                                                },
                                              ),
                                            ],
                                          ),
                                        );
                                      },
                                    ),
                                  ),
                                  ConditionalBuilder(
                                    condition: imageFile != null,
                                    ifTrue: NormalButton(
                                      text: "Ta bort bild",
                                      shouldOverideColor: true,
                                      overriddenColor: redWarningColor,
                                      onPressed: () {
                                        FocusScope.of(context).unfocus();
                                        imageFile = null;
                                        setState(() {});
                                      },
                                    ),
                                  ),
                                  ConditionalBuilder(
                                    condition: imageFile != null,
                                    ifTrue: imageFile != null
                                        ? Image(
                                            image: FileImage(imageFile),
                                          )
                                        : Container(),
                                    ifFalse: fbImage,
                                  ),
                                  SizedBox(height: 40),
                                ],
                              ),
                              NormalButton(
                                text: "Publisera ändringar",
                                onPressed: () async {
                                  if (titleController.text != "" &&
                                      subtitleController.text != "" &&
                                      authorController.text != "" &&
                                      textController.text != "") {
                                    DatabaseService().editArtikel(
                                      artikelID,
                                      titleController.text,
                                      subtitleController.text,
                                      _selectedValue,
                                      authorController.text,
                                      textController.text,
                                      imageFile,
                                    );
                                    Navigator.pop(context);
                                  } else {
                                    showDialog(
                                      context: context,
                                      barrierDismissible: true,
                                      builder: (_) => AlertDialog(
                                        content:
                                            Text("Du måste fylla i alla fält"),
                                        actions: <Widget>[
                                          FlatButton(
                                            child: Text("OK"),
                                            onPressed: () {
                                              Navigator.of(context).pop();
                                            },
                                          )
                                        ],
                                      ),
                                    );
                                  }
                                },
                              ),
                            ],
                          ),
                        );
                      } else {
                        return LoadingWidget();
                      }
                    }),
              ),
            ),
          );
        },
      );
    } else {
      return GlobalScaffold(
        body: Center(
          child: Text("Du har inte tillgång till den här sidan"),
        ),
      );
    }
  }
}

以下是错误日志: 在此输入图片描述 在此输入图片描述


你能添加你的错误日志吗?这里大部分的小部件都是你自定义的小部件。 - Crazy Lazy Cat
@CrazyLazyCat,我现在已经添加了错误日志 :) 如果您需要某个特定小部件的更多信息,请告诉我。 - Rasmus Lian
1个回答

17
从我的角度来看,你遇到了问题,因为你把StreamBuilder插入到SingleChildScrollView中,而这个父组件具有无限增长的高度,StreamBuilder需要知道其父组件的高度。 StreamBuilder需要一个固定大小的父组件,以便他能理解渲染其子组件的空间大小。
你需要做的是将SingleChildScrollView放在一个带有给定大小的Container中(你可以将所有内容放在LayoutBuilder中,并使用constrains.maxHeight作为容器的高度,所以SingleChildScrollView就知道它的大小)。
像这样:(由于我没有你的小部件,所以可能会有一些括号丢失)
希望这能帮助你!
return GlobalScaffold(
       body: LayoutBuilder(
         builder: (ctx, constrains){
           return GlobalScaffold(
      body: Container(
        height: constrains.maxHeight,
        child: SingleChildScrollView(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                GradientHeading(text: "Guider", large: true),
                ConditionalBuilder(
                  condition: isAdmin,
                  ifTrue: Column(
                    children: <Widget>[
                      NormalButton(
                        text: "Skapa ny guide",
                        onPressed: () {
                          Navigator.pushNamed(context, createNewArtikelRoute);
                        },
                      ),
                      NormalButton(
                        text: "Lägg till ny kategori",
                        outlined: true,
                        onPressed: () {},
                      ),
                    ],
                  ),
                ),
                SizedBox(height: 10),
                StreamBuilder<List<GuiderCategoriesData>>(
                  stream: DatabaseService().guiderCategoriesByPopularity,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.active) {
                      return GuiderCategories(
                        snapshot: snapshot,
                        numberOfCategories: snapshot.data.length,
                      );
                    } else if (!snapshot.hasData) {
                      return GuiderCategories(
                        hasNoCategories: true,
                      );
                    } else {
                      return LoadingWidget();
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
  )
  );

2
另一个类似的问题可能会出现在嵌套的列小部件中,其中列尝试占用所有可能的空间,因此它们将高度设置为无限大,而第二列则像“什么?你确定我可以无限大吗?”因此,解决方案是将每个列(或行)的子项包装在扩展小部件中,这有助于管理约束而不需要硬编码特定大小。 - ArthurEKing
@DanielVofchuk 谢谢你!这个方法在这个小部件中起作用了。但是当我尝试对另一个也有这个问题的小部件进行相同的更改时,错误(相同的错误)仍然存在。我已经更新了我的问题,并提供了新的小部件(它比较复杂,我知道大多数小部件都是定制的,但我希望它仍然有效)。你有任何想法为什么这个特定的小部件不起作用吗? - Rasmus Lian
@RasmusLian 我无法确切理解你面临的问题是什么... 你可以提供更多细节吗? - daniel vofchuk
@danielvofchuk 在问题的代码(现已更新)中,我应用了您建议的更改(使用Container和constraints.maxHeight的LayoutBuilder)到两个小部件中,这两个小部件都会引发错误。在第一个小部件中,它起作用了(没有错误),但在另一个小部件中,我仍然遇到错误。您是否在上面的代码中发现了任何错误?我不明白为什么LayoutBuilder解决方案对一个小部件有效,而对另一个小部件无效。提前致谢 :) - Rasmus Lian

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接