提问人:renji 提问时间:6/15/2020 更新时间:6/16/2020 访问量:2060
对于较大的字体,InputDecoration 后缀图标未正确对齐
InputDecoration suffix icon is no aligned properly for bigger fonts
问:
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
bottom: PreferredSize(
preferredSize: Size.fromHeight(80.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Container(
margin: EdgeInsets.all(4.0),
child: TextField(
style: TextStyle(
fontSize: size.height * 0.06,
color: Colors.white,
),
keyboardType: TextInputType.text,
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
size: size.height * 0.06,
),
suffixIcon:IconButton(
onPressed: ()=> print('pressed'),
icon: Icon(
Icons.close,
size: size.height * 0.06,
),
color: Colors.lightBlueAccent[300],
),
hintText: 'Game',
fillColor: Colors.black87,
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
),
),
),
],
),
],
),
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
);
}
}
上面的代码显示了后缀 X 图标移动到右下角,同时使用更大的字体大小,因为前缀图标显示正确。请参考下面的截图
android pixel C 模拟器中的屏幕截图 Flutter 1.17.1 • 通道未知 • 来源不明 框架 • 修订版 f7a6a7906b (5 周前) • 2020-05-12 18:39:00 -0700 引擎 • 修订版 6bc433c6b6 工具 • Dart 2.8.2
答:
3赞
renji
6/16/2020
#1
该问题是由于 IconButton。将其更改为 InkWell 解决了这个问题。
suffixIcon: InkWell(
onTap: () => onTextClear(),
child: Icon(
Icons.close,
size: Constants.screenHeight * 0.04,
),
),
评论
0赞
Ehab Reda
1/19/2022
谢谢仁吉,它就像一个魅力
评论