使用带有灵活小部件的 SingleChildScrollView

Question

我在尝试 Textfield 小部件时遇到问题：“底部溢出 48 像素”。之后我尝试使用 SingleChildScrollView 小部件，但它变得更加复杂，它现在显示此错误：

======== 渲染库捕获的异常===================================== ================ RenderBox 未布置：RenderCustomPaint#7fee2 relayoutBoundary=up3 NEEDS-PAINT

任何建议我该如何解决这个问题？！

不使用 SingleCHildScrollView 的模拟器

import 'package:flutter/material.dart';
import 'package:filter_list/filter_list.dart';



class FilterPage extends StatefulWidget {
  const FilterPage({Key key, this.allTextList}) : super(key: key);
  final List<String> allTextList;
  @override
  _FilterPageState createState() => _FilterPageState();
}
class _FilterPageState extends State<FilterPage> {
  @override
  Widget build(BuildContext context) {
    List<String> countList = [
      "Art",
      "Markt",
      "Photography",
   
    ];
    return Scaffold(
      
      appBar: AppBar(
      title: Text("Filter list Page"),
      ),
      body: SafeArea(

        child: SingleChildScrollView(
          child: Column(
                children: [
                  Flexible(
                    
                    flex: 2,
                    child: FilterListWidget(
                      allTextList: countList,
                      hideheaderText: true,
                      selectedTextBackgroundColor: Colors.red,
                      applyButonTextBackgroundColor: Colors.red,
                      allResetButonColor: Colors.grey,
                      onApplyButtonClick: (list) {
                        //Navigator.pop(context, list);
                      },
                    ),
                  ),
                  Flexible(
                
                    flex: 3,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Container(
                              width: 160,
                              child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
                            ),
                            Container(
                              width: 160,
                              child: TexstInput(lable: 'max-Upvote'),
                            ),
                          ],
                        ),
                        SizedBox(height: 25),
                        Row(
                          children: [
                            Container(
                              width: 160,
                              child: TexstInput(lable: 'min ',icons: Icons.person,),
                            ),
                            Container(
                              width: 160,
                              child: TexstInput(lable: 'max '),
                            ),
                          ],
                        ),
                        SizedBox(height: 25,),
                     Row(
                       children: [

                         SizedBox(width: 10),
                         RaisedButton(child:Text(
                                  'back'
                              ),onPressed: (){},),
                             
                       ],
                     ),

                         SizedBox(height: 25),
                         Row(
                          mainAxisAlignment: MainAxisAlignment.center,


                            children: [
                              RaisedButton(child:Text(
                                  'back'
                              ),onPressed: (){},),
                              SizedBox(width: 10,),
                              RaisedButton(child:Text(
                                  'apply'
                              ),onPressed: (){})
                            ],
                          ),


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


    );
  }

}


class TexstInput extends StatelessWidget {
  TexstInput({
    @required this.lable, this.icons
  }) ;
  IconData icons;
  String lable;
  @override
  Widget build(BuildContext context) {
    return TextField(
      keyboardType: TextInputType.number,
      decoration: InputDecoration(
          icon: Icon(icons),
          contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
          labelText: lable,
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.red, width: 5.0),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey, width: 0.8),
          )
      ),
    );
  }
}

Answer 1

我注意到错误来自FilterListWidget。 也许这可以解决您的问题

Scaffold(
  appBar: AppBar(
    title: Text("Filter list Page"),
  ),
  body: Column(
    children: [
      Flexible(
        child: FilterListWidget(
          allTextList: countList,
          hideheaderText: true,
          selectedTextBackgroundColor: Colors.red,
          applyButonTextBackgroundColor: Colors.red,
          allResetButonColor: Colors.grey,
          onApplyButtonClick: (list) {
            //Navigator.pop(context, list);
          },
        ),
      ),
      Expanded(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                children: [
                  Container(
                    width: 160,
                    child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
                  ),
                  Container(
                    width: 160,
                    child: TexstInput(lable: 'max-Upvote'),
                  ),
                ],
              ),
              SizedBox(height: 25),
              Row(
                children: [
                  Container(
                    width: 160,
                    child: TexstInput(lable: 'min ',icons: Icons.person,),
                  ),
                  Container(
                    width: 160,
                    child: TexstInput(lable: 'max '),
                  ),
                ],
              ),
              SizedBox(height: 25,),
              Row(
                children: [

                  SizedBox(width: 10),
                  RaisedButton(child:Text(
                      'back'
                  ),onPressed: (){},),

                ],
              ),
              SizedBox(height: 25),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  RaisedButton(child:Text(
                      'back'
                  ),onPressed: (){},),
                  SizedBox(width: 10,),
                  RaisedButton(child:Text(
                      'apply'
                  ),onPressed: (){})
                ],
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)