我有一个像这样的 TextFormField:
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
Run Code Online (Sandbox Code Playgroud)
每当调用onChanged()时,这个 TextFormField 就会从 api 获取电子邮件,所以我决定在里面放一个进度/加载指示器来指示它正在获取数据,但我很难弄清楚实现它。
那么有没有办法可以在 TextFormField 中插入CircularProgressIndicator()或简单的进度/加载指示器?
像这样的东西:
TextFormEdit 没有正确的属性,即 Suffix 小部件。不过,InputDecoration 具有Suffix属性,您可以在其中附加您想要的任何进度小部件。到达此处后,您可以直接在小部件中使其保持可见或不可见(以及一系列其他设置)。
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
suffix: isLoading?CircularProgressIndicator():null
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
Run Code Online (Sandbox Code Playgroud)
支持@stefanodecillis,我也可以使用Stack来实现它
Stack(
children: <Widget>[
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
(state.isSubmitting)
? Positioned(
top: 5,
right: 5,
child: Container(
child: CircularProgressIndicator(),
),
)
: Container(),
],
),
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4121 次 |
| 最近记录: |