底部被 Infinity 像素溢出的 RenderFlex

Question

我有一个非常简单的控件，我试图在其中显示一个 DropdownButton 和几个 TextFields。
当应用程序在模拟器中运行时，我收到一条错误消息

BOTTOM OVERFLOWED BY Infinity PIXELS 

Stack Trace 暗示了这个问题并指出了一些相关文档，但对于 Flutter 来说非常新，我不确定需要更改什么。

我根据类似错误的问题尝试了许多建议，但没有任何运气。

堆栈跟踪：

I/flutter (10708): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter (10708): The following assertion was thrown during performLayout():
I/flutter (10708): RenderIndexedStack object was given an infinite size during layout.
I/flutter (10708): This probably means that it is a render object that tries to be as big as possible, but it was put
I/flutter (10708): inside another render object that allows its children to pick their own size.
I/flutter (10708): The nearest ancestor providing an unbounded width constraint is:
I/flutter (10708):   RenderFlex#1d3ef relayoutBoundary=up7 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10708):   creator: Row ← Padding ← Container ← DefaultTextStyle ← Stack ← Listener ← _GestureSemantics ←
I/flutter (10708):   RawGestureDetector ← GestureDetector ← Semantics ← DropdownButton<String> ← Column ← ⋯
I/flutter (10708):   parentData: offset=Offset(0.0, 0.0) (can use size)
I/flutter (10708):   constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=Infinity)
I/flutter (10708):   size: MISSING
I/flutter (10708):   direction: horizontal
I/flutter (10708):   mainAxisAlignment: spaceBetween
I/flutter (10708):   mainAxisSize: min
I/flutter (10708):   crossAxisAlignment: center
I/flutter (10708):   textDirection: ltr
I/flutter (10708):   verticalDirection: down
I/flutter (10708): The nearest ancestor providing an unbounded height constraint is:
I/flutter (10708):   RenderFlex#bb3f8 relayoutBoundary=up1 NEEDS-LAYOUT NEEDS-PAINT
I/flutter (10708):   creator: Column ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ←
I/flutter (10708):   AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#6a13f ink
I/flutter (10708):   renderer] ← NotificationListener<LayoutChangedNotification> ← PhysicalModel ←
I/flutter (10708):   AnimatedPhysicalModel ← Material ← ⋯
I/flutter (10708):   parentData: offset=Offset(0.0, 0.0); id=_ScaffoldSlot.body (can use size)
I/flutter (10708):   constraints: BoxConstraints(0.0<=w<=391.4, 0.0<=h<=659.9)
I/flutter (10708):   size: MISSING
I/flutter (10708):   direction: vertical
I/flutter (10708):   mainAxisAlignment: start
I/flutter (10708):   mainAxisSize: max
I/flutter (10708):   crossAxisAlignment: center
I/flutter (10708):   verticalDirection: down
I/flutter (10708): The constraints that applied to the RenderIndexedStack were:
I/flutter (10708):   BoxConstraints(unconstrained)
I/flutter (10708): The exact size it was given was:
I/flutter (10708):   Size(Infinity, Infinity)
I/flutter (10708): See https://flutter.io/layout/ for more information.

为简洁起见，此处的代码已删除 TextFields，因为无论有无它们都会发生错误。

代码

import 'package:flutter/material.dart';
import 'package:todo_app/model/todo.dart';
import 'package:todo_app/util/dbhelper.dart';
import 'package:intl/intl.dart';

class TodoDetail extends StatefulWidget {
  Todo todo;
  TodoDetail(Todo todo) {
    this.todo = todo;
    debugPrint("called ctor with " + todo.title + "!!");
  }

  @override
  State<StatefulWidget> createState() => TodoDetailState(todo);
}

class TodoDetailState extends State {
  final Todo todo;
  TodoDetailState(this.todo);

  final _priorites = ["High, Medium", "Low"];
  String _priority = "Low";
  TextEditingController titleController = TextEditingController();
  TextEditingController descriptionController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    titleController.text = todo.title;
    descriptionController.text = todo.description;
    TextStyle textStyle = Theme.of(context).textTheme.title;

    return Padding(
        padding: EdgeInsets.only(top: 35, right: 10, left: 10),
        child: Scaffold(
            appBar: AppBar(
              automaticallyImplyLeading: false,
              title: Text('Add New'), //todo.title
            ),
            body: Column(children: <Widget>[
              DropdownButton<String>(
                  isExpanded: true,
                  items: _priorites.map((String value) {
                    return DropdownMenuItem<String>(
                        value: value, child: Text(value));
                  }).toList(),
                  style: textStyle,
                  value: "Low",
                  onChanged: null)
            ])));
    //);
  }
}

Answer 1

尝试将具有固定宽度的 Container 包裹在 DropdownButton 周围。

@override
Widget build(BuildContext context) {
  titleController.text = todo.title;
  descriptionController.text = todo.description;
  TextStyle textStyle = Theme.of(context).textTheme.title;

  return Padding(
    padding: EdgeInsets.only(top: 35, right: 10, left: 10),
    child: Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Text('Add New'), //todo.title
      ),
      body: Container(
        height: 200,
        child: Column(
          children: <Widget>[
            Container(
              // don't forget about height
              height: 200,
              child: DropdownButton<String>(
                isExpanded: true,
                items: _priorites.map((String value) {
                  return DropdownMenuItem<String>(
                      value: value, child: Text(value));
                }).toList(),
                style: textStyle,
                value: "Low",
                onChanged: null,
              ),
            )
          ],
        ),
      ),
    ),
  );
}

Answer 2

我在使用“heigth:MediaQuery.of(context).size.heigth”时犯了这个错误 --> 一个 renderflex 溢出 我用 Expanded 处理它

        Expanded(
        child: Container(
            decoration: BoxDecoration(color: Colors.deepOrangeAccent),
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
            child: Text("this is handle")))

Answer 3

#A RenderFlex 在底部被无限像素溢出。#

Flutter 中的 OnTap 事件处理#

从一个小部件路由到其他小部件#

这个问题之所以出现，是因为底部小部件没有设置高度或其他限制，并且它超出了屏幕。因此，您会收到类似的错误 底部的无限像素溢出的 RenderFlex。

要解决问题，您可以使用 SingleChildScrollView() 小部件进行包装，如果 添加高度无法正常工作

SingleChildScrollView( 
  child:
    //Text('Do not have Account ?'),
    GestureDetector(

     child: Text('Do not have Account ?'),
     onTap: (){
       **Navigator.push(context, MaterialPageRoute(builder: (_)=> Register()));**
     },
   ),

),