использование SingleChildScrollView с гибким виджетом

#flutter #keyboard #rendering #overflow #textfield

#flutter #клавиатура #рендеринг #переполнение #текстовое поле

Вопрос:

я столкнулся с проблемой при попытке использования виджета текстового поля: «нижняя часть переполнена на 48 пикселей». после этого я попытался использовать виджет SingleChildScrollView, но это стало сложнее, теперь он показывает эту ошибку:

======== Исключение, обнаруженное библиотекой рендеринга ===================================================== Окно визуализации не было выложено: RenderCustomPaint#7fee2 relayoutBoundary= up3 ПОТРЕБНОСТИ-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),
          )
      ),
    );
  }
}
 

Комментарии:

1. Проверьте мой ответ ниже

Ответ №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: (){})
                ],
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)
 

Комментарии:

1. спасибо за вашу помощь, теперь это работает! в чем была проблема? можете ли вы немного объяснить? вы изменили только гибкий с помощью расширенного виджета, верно? чем они отличались?

2. Expanded предназначен для того, чтобы занимать оставшееся пространство, в то время как Flexible будет занимать только необходимое пространство для отображения его содержимого