【问题标题】:Using SingleChildScrollview inside Column widget content is not scrolling在 Column 小部件内容中使用 SingleChildScrollview 不滚动
【发布时间】:2020-04-25 15:26:38
【问题描述】:
Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      body: Container(
        child: Column(
          children: <Widget>[
            Stack(
              fit: StackFit.loose,
              children: <Widget>[
                HeadersVC(),
                Container(
                  margin: EdgeInsets.only(top: 40.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      FlatButton(
                        splashColor: Colors.transparent,
                        highlightColor: Colors.transparent,
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Icon(
                          Icons.arrow_back,
                          size: 30,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        widget.headertitleladderPre,
                        style: TextStyle(
                            fontSize: 22.0,
                            color: Colors.white,
                            fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                )
              ],
            ),
            SingleChildScrollView(
              padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 10.0),
                  ),
                  //******************************************** Date Picker  */
                  TextFormField(
                    onTap: () async {
                      FocusScope.of(context).requestFocus(new FocusNode());
                      _selectDate(context);
                    },
                    decoration: InputDecoration(
                        enabledBorder: UnderlineInputBorder(
                            borderSide:
                                BorderSide(color: Colors.black26, width: 1.5)),
                        contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
                        labelText: formatDate(formatedDate),
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black),
                        suffixIcon: new Padding(
                          padding: const EdgeInsets.only(
                              top: 0.0, left: 0.0, right: 0.0, bottom: 0.0),
                          child: SizedBox(
                            height: 15,
                            child: Icon(
                              Icons.calendar_today,
                              color: Colors.red,
                            ),
                          ),
                        )),
                  ),
                  Padding(
                    padding: EdgeInsets.only(left: 0.0, top: 10.0),
                  ),
                  //******************************************** DropDown Button  */
                  Container(
                    child: DropdownButton(
                      underline: Container(
                        height: 1.0,
                        decoration: const BoxDecoration(
                            border: Border(
                                bottom: BorderSide(
                                    color: Colors.black26, width: 1.5))),
                      ),
                      value: _selectedladleno,
                      items: _dropDownladleItems,
                      onChanged: changedDropDownItem,
                      isExpanded: true,
                      isDense: false,
                      icon: Icon(
                        Icons.arrow_drop_down,
                        color: Colors.red,
                      ),
                      iconSize: 30,
                      elevation: 12,
                      style: TextStyle(
                        fontSize: 15,
                      ),
                    ),
                  ),
                  //******************************************** Radio Button  */
                  ButtonBar(
                    alignment: MainAxisAlignment.start,
                    buttonPadding: EdgeInsets.only(left: 0.0),
                    children: <Widget>[
                      Radio(
                        groupValue: _character,
                        onChanged: (SingingCharacter value) {
                          setState(() {
                            _character = value;
                            print(_character);
                          });
                        },
                        value: SingingCharacter.New,
                        activeColor: Colors.red,
                      ),
                      Text(
                        "New",
                        style: TextStyle(fontSize: 13.0),
                      ),
                      Radio(
                        groupValue: _character,
                        onChanged: (SingingCharacter value) {
                          setState(() {
                            _character = value;
                            print(_character);
                          });
                        },
                        value: SingingCharacter.Repair,
                        activeColor: Colors.red,
                      ),
                      Text(
                        "Repair",
                        style: TextStyle(fontSize: 13.0),
                      ),
                      Radio(
                        groupValue: _character,
                        onChanged: (SingingCharacter value) {
                          setState(() {
                            _character = value;
                            print(_character.toString());
                          });
                        },
                        value: SingingCharacter.OnlyMachineChange,
                        activeColor: Colors.red,
                      ),
                      Text(
                        "Machine Change",
                        style: TextStyle(fontSize: 13.0),
                      ),
                    ],
                  ),
                  //******************************************** Machine Number  */
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Machine Number *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        labelText: "Well Block Party *",
                        labelStyle: TextStyle(
                            fontFamily: "Montserrat", color: Colors.black)),
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

我得到了类似这样的错误:

正在执行热重新加载... ════════════════════════════ 颤振:在布局期间抛出了以下断言: flutter:一个 RenderFlex 在底部溢出了 158 个像素。 扑: 颤振:相关的导致错误的小部件是: 颤振:列文件://Users/baps/Projects/Flutter%20Projects/TRLApp/trlapp/lib/ladlePreheating.dart:64:16 扑: 颤动:溢出的 RenderFlex 具有 Axis.vertical 的方向。 flutter: RenderFlex 溢出的边缘在渲染中已经用黄色和 颤动:黑色条纹图案。这通常是由于内容对于 RenderFlex 来说太大了。 颤振:考虑应用弹性因子(例如使用扩展小部件)来强制 颤振:RenderFlex 适应可用空间,而不是按其自然大小调整大小。 flutter:这被认为是错误情况,因为它表明有内容不能被 扑:见过。如果内容合法地大于可用空间,请考虑使用 flutter: ClipRect 小部件在放入 flex 之前,或者使用可滚动容器而不是 Flex, 颤动:就像一个 ListView。 颤振:有问题的具体 RenderFlex 是:RenderFlex#4bdfd relayoutBoundary=up1 OVERFLOWING: 颤振:需要合成 颤振:创建者:列 ← 容器 ← _BodyBuilder ← MediaQuery ← LayoutId-[<_scaffoldslot.body>] ← 颤振:CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ← AnimatedDefaultTextStyle ← 颤振:_InkFeatures-[GlobalKey#9c17c 墨迹渲染器] ← NotificationListener ← 颤振:物理模型←⋯ 颤振:父数据:偏移=偏移(0.0,0.0); id=_ScaffoldSlot.body(可以使用大小) 颤振:约束:BoxConstraints(0.0

【问题讨论】:

  • 您尝试过热重启吗?
  • 另外请移除列小部件中的标题栏或堆栈小部件,您可以在appbar中自行添加。即使它是定制的。

标签: flutter dart cross-platform


【解决方案1】:

Missed to Expand the ScrollView as Column 容器不知道它需要占用多少空间,因此,它计算的尺寸大于屏幕尺寸。

所以只需将 Expanded 放入其中:

...
Expanded(
                child: SingleChildScrollView(
                  padding:...

【讨论】:

  • 欢迎您,标记为完成,否则问题将保持打开状态。
  • 亲爱的,我遇到了错误; RenderBox 未布置:RenderRepaintBoundary#6ba10 NEEDS-LAYOUT NEEDS-PAINT 'package:flutter/src/rendering/box.dart':断言失败:第 1940 行 pos 12:'hasSize'
  • 解释你的问题@Kamlesh,或者再补充一个问题,我去看看。
【解决方案2】:

解决方案:你需要在 column 之前使用 SingleChildScrollView 。如果你想保持分离的堆栈部分,你可以使用 CustomScrollView 。 CustomScrollView

  Widget build(BuildContext context) {
return Scaffold(
    resizeToAvoidBottomInset: false,
    backgroundColor: Colors.white,
    body: SingleChildScrollView(
      padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
      child: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Stack(
              fit: StackFit.loose,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 40.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      FlatButton(
                        splashColor: Colors.transparent,
                        highlightColor: Colors.transparent,
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Icon(
                          Icons.arrow_back,
                          size: 30,
                          color: Colors.white,
                        ),
                      ),
                      Text(
                        "headertitleladderPre",
                        style: TextStyle(
                            fontSize: 22.0,
                            color: Colors.white,
                            fontWeight: FontWeight.bold),
                      ),
                    ],
                  ),
                )
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top: 10.0),
            ),
            //******************************************** Date Picker  */
            TextFormField(
              onTap: () async {},
              decoration: InputDecoration(
                  enabledBorder: UnderlineInputBorder(
                      borderSide:
                          BorderSide(color: Colors.black26, width: 1.5)),
                  contentPadding: EdgeInsets.only(left: 0.0, right: 0.0),
                  labelText: "formatedDate",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black),
                  suffixIcon: new Padding(
                    padding: const EdgeInsets.only(
                        top: 0.0, left: 0.0, right: 0.0, bottom: 0.0),
                    child: SizedBox(
                      height: 15,
                      child: Icon(
                        Icons.calendar_today,
                        color: Colors.red,
                      ),
                    ),
                  )),
            ),
            Padding(
              padding: EdgeInsets.only(left: 0.0, top: 10.0),
            ),
            //******************************************** DropDown Button  */
            Container(
              child: DropdownButton<String>(
                value: dropdownValue,
                icon: Icon(Icons.arrow_downward),
                iconSize: 24,
                elevation: 16,
                style: TextStyle(color: Colors.deepPurple),
                underline: Container(
                  height: 2,
                  color: Colors.deepPurpleAccent,
                ),
                onChanged: (String newValue) {},
                items: <String>['One', 'Two', 'Free', 'Four']
                    .map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ),
            //******************************************** Radio Button  */
            ButtonBar(
              alignment: MainAxisAlignment.start,
              buttonPadding: EdgeInsets.only(left: 0.0),
              children: <Widget>[
                Text("Radio Here"),
                Text(
                  "New",
                  style: TextStyle(fontSize: 13.0),
                ),
                Text("One More Radio Here"),
                Text(
                  "Repair",
                  style: TextStyle(fontSize: 13.0),
                ),
                Text("One More Radio Here"),
                Text(
                  "Machine Change",
                  style: TextStyle(fontSize: 13.0),
                ),
              ],
            ),
            //******************************************** Machine Number  */
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Machine Number *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            ),
            TextFormField(
              decoration: InputDecoration(
                  labelText: "Well Block Party *",
                  labelStyle: TextStyle(
                      fontFamily: "Montserrat", color: Colors.black)),
            )
          ],
        ),
      ),
    ));

}

【讨论】:

    【解决方案3】:

    SingleChildScrollView 应该环绕Column

    Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.white,
      body: Container(
        child: SingleChildScrollView( // <--- Put it here.
            child: Column( // <--- Your Column.
    

    【讨论】:

    • 是的,它可以,但第一个堆栈容器包含他的 appbar 或类似的东西......
    • Appbar 是脚手架的一部分。
    • 是的,我知道,但出于某种原因,他在专栏中补充道。不过很奇怪。
    • 错误的代码给出了错误的输出,理想情况下它应该在脚手架中。如果是在列中,则需要更改代码,并且应该按照我在回答中提到的方式使用 SingleChildScrollView。
    • 是的,没错,可能是 Flutter 的初学者,所以可能不知道其中的所有可用功能。
    【解决方案4】:

    避免使用

    孩子:ConstrainedBox( 约束:BoxConstraints()),

    在SingleChildScrollView 中,当我删除此小部件时,渲染错误消失了。

    我的布局示例代码。

    @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: kBackgroundColorGray,
          appBar: commonAppBar,
            body: SafeArea(
              child: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
    
                 ],
                ),
              ),
            )
        );
      }
    

    【讨论】:

      猜你喜欢
      • 2020-11-09
      • 2021-12-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-08
      • 2023-01-28
      • 2019-04-23
      相关资源
      最近更新 更多