TextField 后缀动画对齐

问题描述

有人遇到过类似的问题吗? TextField sufixIcon 需要一个像这样的小部件:

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

代码结果

Result of the code

现在我想要同样的东西,但加载动画:

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

带动画的代码结果

Result of the code with animation

如果我将 suffixIcon 更改为 sufix,也会发生同样的情况。

问题: 像图标一样右对齐,我尝试使用 Horizo​​ntalAlignment 似乎不起作用。

解决方法

以下是将加载动画对齐到 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),);
  }

输出:

enter image description here