TextField后缀动画对齐

Posted 2023-02-19

【中文标题】TextField后缀动画对齐

【英文标题】：TextField suffix animation alignment

【发布时间】：2021-05-04 22:08:30

【问题描述】：

有人遇到过类似的问题吗？ TextField sufixIcon 采用这样的小部件：

TextField(
  decoration: new InputDecoration(
    suffixIcon: Icon(Icons.ac_unit),
  ),
),

代码结果

现在我想要同样的东西，但加载动画：

TextField(
  decoration: new InputDecoration(
    suffixIcon: Container(
    child: SpinKitWave(
      color: Colors.red,
      size: 20.0,
    ),
),

带有动画的代码结果

如果我将 suffixIcon 更改为 sufix，也会发生同样的情况。问题： 像图标一样右对齐，我尝试使用 Horizo​​ntalAlignment 似乎不起作用。

【参考方案1】：

以下是如何将加载动画对齐到TextField 的右侧：

@override
  Widget build(BuildContext context) 
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: width * 0.025),
            child: TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderRadius: const BorderRadius.all(
                    const Radius.circular(60),
                  ),
                ),
                filled: true,
                fillColor: const Color(0xFFE3F8F8),
                suffixIcon: Container(
                  width: width * 0.2,
                  height: width * 0.1,
                  child: SpinKitWave(
                    color: Colors.red,
                    size: 20.0,
                  ),
                ),
                prefixIcon: Icon(
                  Icons.search,
                  color: const Color(0x99000000),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  

输出：