一文解决Flutter中使用TextField遇到的各种疑难杂症

Posted 2023-04-27

参考技术A 可以使用 SingleChildScrollView 包裹布局
这里还需要了解一个 Scaffold 中的一个属性 resizeToAvoidBottomInset

官方文档给出的解释就是处理键盘遮挡问题，默认是 true，如果不希望顶起需要设置为 false。
在 sdk 低版本的时候是使用 resizeToAvoidBottomPadding 需要将其设置为 false，现在已经弃用。但网上很多文章还没有改正，仍然用的 resizeToAvoidBottomPadding。

分两种情况
一种是使用系统的返回键，比如 android 底部导航自带的返回，
另一种是使用导航栏自定义的返回键
第一种情况需要在页面根布局使用 WillPopScope 在 onWillPop 中拦截返回处理。
原理都是通过判断输入框是否获取了焦点

当底部有固定的组件，比如提交按钮，我们在键盘弹起的时候希望按钮贴着键盘顶部固定，但是中间滚动视图可以自由滚动
可以在 SingleChildScrollView 外部再使用 Stack 包裹，悬浮按钮使用 Positioned 定位，
还要⚠️注意要给滚动组件底部留出距离防遮挡，同时还有动态加上 bottomBar 的高度，因为在 iphoneX 以上的手机，会有个虚拟按键，如果不加上该按键高度，同样会被遮挡
高度获取方法： MediaQuery.of(context).padding.bottom

在 showDialog 布局中使用 Scaffold 包裹，不要忘了将 backgroundColor 设为透明。
如果弹窗过高，还是需要将高度固定，然后使用 SingleChildScrollView ，弹窗中同样也可以在执行关闭的时候拦截，判断键盘是否弹起，如果弹起则要先关闭键盘。

给所有输入框绑定 FoucusNode
在 maxLines=1 的情况下，输入框不支持换行，换行按钮会变成 done
监听 onEditingComplete 方法

根布局使用 GestureDetector 或者 InkWell 包裹，点击的时候收起键盘。

最后要记得销毁

Flutter中如何同步两个TextField

【中文标题】Flutter中如何同步两个TextField

【英文标题】：How to synchronise two TextFields in Flutter

【发布时间】：2021-04-27 09:57:06

【问题描述】：

假设我在 Flutter 中呈现了两个文本字段：“净价”和“总价”。我想同步它们，所以当用户更新净价时，会自动计算和更新总价。当用户更改总价时，应更新净价字段。如何在 Flutter 中实现这种行为？

【问题讨论】：

使用TextEditingControllers。由于您的 TextFields 可能驻留在同一个小部件中，我认为 Provider 在这里有点过分......

【参考方案1】：

我建议使用provider package 来解决这个问题。

基本上，您创建一个扩展 ChangeNotifier 的类并保存两个 TextField 的值，然后为两个 Text 小部件提供它，在一个公共父小部件的某处：

ChangeNotifierProvider(
  create: (context) => MyClass(),
  child: MyApp(),
),

现在，每当您更改其中一个 TextField 时，只需从 MyClass 调用一个函数，该函数计算另一个 TextField 的新值应该是什么。 例如：

void calculate() 
    // Some calculation and updating the values of the TextFields
    notifyListeners();
  

注意notifyListeners() 调用，它告诉正在侦听此模型的小部件进行重建。

要收听此模型，请将您的 Text 小部件包装在消费者中，例如：

return Consumer<MyClass>(
builder: (context, myClass, child) 
  return Text("Total price: $myClass.netPrice");
);

你可以从flutter状态管理tutorial了解更多