对于较大的字体,InputDecoration 后缀图标未正确对齐

InputDecoration suffix icon is no aligned properly for bigger fonts

提问人:renji 提问时间:6/15/2020 更新时间:6/16/2020 访问量:2060

问:

  @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

Flutter Text字段

评论


答:

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
谢谢仁吉,它就像一个魅力