如何解决如何删除列中扩展小部件之间的空间?
我试图减少具有高度属性的行(文本字段)之间的空间,但它不起作用,SizedBox 也不起作用,由于我的 filterList 不能省略扩展小部件(它显示“一个 RenderFlex 溢出了像素”错误),我试图用 flex 值修复它,但它也不起作用。 任何想法我该如何修复它?!
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'
),)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。