如何删除列中扩展小部件之间的空间？

问题描述

我试图减少具有高度属性的行（文本字段）之间的空间，但它不起作用，Sizedbox 也不起作用，由于我的 filterList 不能省略扩展小部件（它显示“一个 RenderFlex 溢出了像素”错误），我试图用 flex 值修复它，但它也不起作用。 任何想法我该如何修复它？！

my emulator screenshot

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'),],child: TexstInput(lable: 'min',icons: Icons.person_rounded,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(),);
  }
}

解决方法

尝试使用以下几行

        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'),],Expanded(
          child: Row(
            children: [
           Container(width: 2 ),Expanded( 
                child: TexstInput(lable: 'min',icons: Icons.person_rounded,Expanded( 
                child: TexstInput(lable: 'max'),

,

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