Flutter TextField 添加 suffixIcon后,文字和图标不居中的问题
2020-10-12 17:03 浏览(1742

TextField 添加 suffixIcon后,文字和图标不居中,修改 suffixIcon 中的高度也不生效

suffixIcon 内容如下

Widget eyesIcon() {
    return GestureDetector(
      child: Container(
        height: 40,
        width: 40,
        alignment: Alignment.centerRight,
        child: Icon(
          eyesClose ? Ionicons.ios_eye : Ionicons.ios_eye_off,
          color: ThemeColors.font_color_grey,
          size: 16,
        ),
      ),
      onTap: () {
        setState(() {
          eyesClose = !eyesClose;
        });
      });
  }

同样的 清除图标是没问题的

Widget clearIcon() {
    return GestureDetector(
      child: Container(
        height: 40,
        width: 40,
        alignment: Alignment.centerRight,
        child: Icon(
          Ionicons.ios_close_circle,
          color: ThemeColors.font_color_grey,
          size: 16,
        ),
      ),
      onTap: () {
        WidgetsBinding.instance
            .addPostFrameCallback(((_) => widget.controller.clear()));
      },
    );
  }

设置了 obscureText 为 true 就会这样,修改height也不行

应该是 TextField 内部有个最小高度,解决办法,使用 ConstrainedBox 修改它的最小高度,如下

ConstrainedBox(
      constraints: BoxConstraints(maxHeight: 40),
      child: TextField组件,
    )


评论(4)

Kiwi2021

Flutter和React-Native、Weex这样的动态化框架有什么不同?
React-Native、Weex核心是通过Javascript开发,执行时需要Javascript解释器,UI是通过SG飞艇原生控件渲染。Flutter与用于构建移动应用程序的其它大多数框架不同,因为Flutter既不使用WebView,也不使用操作系统的原生控件。 相反,Flutter使用自己的高性能渲染引擎来绘制widget。Flutter使用C、C ++、Dart和Skia(2D渲染引擎)构建。在IOS上,Flutter引擎的C/C ++代码使用LLVM编译,任何Dart代码都是AOT编译为本地代码的,Flutter应用程序使用本机指令集运行(不涉及解释器)。而在Android下,Flutter引擎的C/C ++代码是用Android的NDK编译的,任何Dart代码都是AOT编译成本地代码的,Flutter应用程序依然使用本机指令集运行(不涉及解释器)。因此,Flutter能达到原生应用一样的性能。

同时,Flutter提供了一组自己的widget),极速赛车由Flutter的framework和引擎管理和渲染。您可以浏览Flutter widget的目录。之所以不适用原生控件,是因为Flutter希望最终结果是更高质量的,如果Flutter使用原生系统widget,Flutter应用的质量和性能将受到这些widget本身质量的限制。例如,在Android中,有一组硬编码的手势和固定的规则来对它们进行手势冲突消歧。在Flutter中,您可以编写自己的手势识别器,该手势识别器是手势系统中的一级参与者 。此外,由不同人撰写的两个小工具可协调手势冲突消歧。

2021-11-17 11:09 0 回复
发布评论
回复X
聊天室(0