问题描述
我有一个Row
小部件,带有输入文件和搜索按钮。并且该行位于“列”中。
如何使搜索按钮适合行的高度,使按钮的大小等于输入字段的高度?
我尝试将crossAxisAlignment: CrossAxisAlignment.stretch,
添加到行中,但收到错误:-
BoxConstraints forces an infinite height.
我没有输入字段的高度。不想硬编码按钮的高度,因为它应该始终与“输入”框的高度匹配。
此外,为行分配高度并添加CrossAxisAlignment.stretch
不会更改输入字段的高度,唯一的按钮正在更改。
这里的问题是什么以及如何解决?
Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,mainAxisAlignment: MainAxisAlignment.center,children: [
Expanded(
child: Container(
child: TextField(
decoration: Inputdecoration(
border: InputBorder.none,hintText: 'search',hintStyle:
Theme.of(context).textTheme.bodyText2.copyWith(
color: Theme.of(context).accentColor,),contentPadding: EdgeInsets.symmetric(
vertical: 8,horizontal: 20
),fillColor: Theme.of(context).primaryColor,filled: true,style: Theme.of(context).textTheme.bodyText2,FlatButton(
onpressed: () {},color: Colors.grey,child: Icon(
Icons.search,],)
解决方法
我可以给你个主意。
在FlatButton
内也包裹Container
,并为其定义宽度和高度。这样的东西
Row(
mainAxisAlignment: MainAxisAlignment.center,children: [
Container(
width: MediaQuery.of(context).size.width * 0.8,color: Theme.of(context).primaryColor,height: 50.0,child: TextField(
decoration: InputDecoration(
border: InputBorder.none,hintText: 'search',hintStyle: Theme.of(context).textTheme.bodyText2.copyWith(
color: Theme.of(context).accentColor,),contentPadding:
EdgeInsets.symmetric(vertical: 8,horizontal: 20),filled: true,style: Theme.of(context).textTheme.bodyText2,Container(
height: 50.0,width: MediaQuery.of(context).size.width * 0.2,child: FlatButton(
onPressed: () {},color: Colors.grey,child: Icon(
Icons.search,],)
否则,至少为height
定义width
和FlatButton
并将TextField
保留为Expanded
。
希望有效!
,要使int index = list.indexOf(list.stream().filter(a-> a.getInfo().getDetails().getIndicator().equals("3")));
list.remove(index)
与Button
始终具有相同的height
,最好将TextField
小部件用固定的Row
包装container
和height
与Button
和 double.infinity Container
:
height
,
我有相同的要求-我想在Container
的末尾加上正方形TextField
。但是由于文本大小以及文本输入高度可能会随着时间而变化,所以我不想对它的大小进行硬编码。
一种解决方案是简单地在TextField
上使用suffixIcon
作为文本输入( red 正方形)的一部分。
就我而言,我不得不在Widget
之外使用额外的TextField
。
这里的关键是使用:
-
IntrinsicHeight
作为Row
的父母 -
AspectRatio
1是Container
(灰色正方形)的父级。
查看代码:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,visualDensity: VisualDensity.adaptivePlatformDensity,home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo Home Page'),body: Column(
mainAxisAlignment: MainAxisAlignment.start,children: [
IntrinsicHeight(
child: Row(
children: [
Expanded(
child: TextField(
textAlignVertical: TextAlignVertical.center,decoration: InputDecoration(
hintText: "Search...",fillColor: Colors.blueGrey,border: InputBorder.none,prefixIcon: const Icon(
Icons.search,color: Colors.white,suffixIcon: Container(
color: Colors.red,child: const Icon(
Icons.close,color: Colors.black,AspectRatio(
aspectRatio: 1,child: GestureDetector(
onTap: () {
// handle on tap here
},child: Container(
color: Colors.grey,child: const Icon(
Icons.clear,);
}
}
请参阅image。
请注意,我在this SO answer中找到了此解决方案的灵感。