flutter - 如何删除列中展开的小部件之间的空间？

Question

我试图通过高度属性减少行（文本字段）之间的空间，但它不起作用，Sizedbox 也不能正常工作，由于我的 filterList 不能省略扩展的小部件（它显示“A RenderFlex 被像素溢出”错误)，我尝试使用 flex Value 修复它，但它也不起作用。任何想法我该如何解决？！

我的模拟器截图

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",
      "Mt",
      "P",
      "Pl"
   
    ];
    return Scaffold(
      appBar: AppBar(
        title: Text("Filter list Page"),
      ),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Expanded(
              child: FilterListWidget(
                allTextList: countList,
                height: MediaQuery.of(context).size.height,
                hideheaderText: true,
                selectedTextBackgroundColor: Colors.red,
                applyButonTextBackgroundColor: Colors.red,
                allResetButonColor: Colors.grey,
                onApplyButtonClick: (list) {
                  //Navigator.pop(context, list);
                },
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max-Upvote'),
                  ),
                ],
              ),
            ),
            Expanded(
              child: Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min',icons: Icons.person_rounded,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max'),
                  ),
                ],
              ),
            ),
            Container(
                child: RaisedButton(child:Text(
                  'apply'
                ),),
              ),
          ],
        ),
      ),
    );
  }
}
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),
          )
      ),
    );
  }
}

主要的

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



void main() async{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: false,
      home:FilterPage(),


    );
  }
}

Answer 1

不是 100% 确定您如何想象您的布局。您打算添加更多搜索标签吗？如果您愿意，可以更改 flex 值。如果您想让您的行位于 FilterListWidget 的正下方，则将 mainAxisAlignment: MainAxisAlignment.start 添加到第二列。

SafeArea(
    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.end,
            children: [
              Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max-Upvote'),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'min',icons: Icons.person,),
                  ),
                  Container(
                    width: 180,
                    child: TexstInput(lable: 'max'),
                  ),
                ],
              ),
              Container(
                child: RaisedButton(child:Text(
                    'apply'
                ),),
              ),
            ],
          ),
        ),
      ],
    ),
  )

Answer 2

尝试以下几行

        Expanded(
          child: Row(
            children: [
           Container(width: 2 ),
              Expanded( 
                child: TexstInput(lable: 'min-Upvote',icons: Icons.favorite,),
              ),
           Container(width: 2 ),
              Expanded( 
                child: TexstInput(lable: 'max-Upvote'),
              ),
           Container(width: 2 ),
            ],
          ),
        ),
        Expanded(
          child: Row(
            children: [
           Container(width: 2 ),
              Expanded( 
                child: TexstInput(lable: 'min',icons: Icons.person_rounded,),
              ),
           Container(width: 2 ),
              Expanded( 
                child: TexstInput(lable: 'max'),
              ),
           Container(width: 2 ),
            ],
          ),
        ),