Flutter中特定FocusNode获取焦点时如何设置与屏幕边缘的边距

问题概述 #

当特定FocusNode获取焦点时，系统默认会将对应控件滚动到可视区域，此时控件会紧贴屏幕顶部显示，需要自定义顶部预留偏移量。

方案1：单控件针对性处理（仅目标控件生效） #

监听目标FocusNode的焦点变化，获焦时主动调用Scrollable.ensureVisible方法，通过margin参数指定顶部预留边距：

// 1. 声明FocusNode和自定义顶部偏移量
final FocusNode _targetButtonFocus = FocusNode();
const double _reservedTopOffset = 20.0;

@override
void initState() {
  super.initState();
  // 2. 绑定焦点监听
  _targetButtonFocus.addListener(() {
    if (_targetButtonFocus.hasFocus) {
      // 等待当前帧渲染完成后执行滚动，避免context异常
      WidgetsBinding.instance.addPostFrameCallback((_) {
        Scrollable.ensureVisible(
          _targetButtonFocus.context!,
          duration: const Duration(milliseconds: 200),
          curve: Curves.easeInOut,
          // 顶部预留指定偏移
          margin: EdgeInsets.only(top: _reservedTopOffset),
          // alignment=0代表对齐滚动区域顶部
          alignment: 0.0,
        );
      });
    }
  });
}

@override
void dispose() {
  // 销毁FocusNode避免内存泄漏
  _targetButtonFocus.dispose();
  super.dispose();
}

// 3. 将FocusNode绑定到目标控件
ElevatedButton(
  focusNode: _targetButtonFocus,
  onPressed: () => debugPrint("按钮点击"),
  child: const Text("目标按钮"),
)

方案2：全局统一配置（所有焦点控件生效） #

如果需要应用内所有获焦控件都默认保留顶部偏移，可以自定义全局滚动行为：

1. 重写ScrollBehavior自定义滚动逻辑

class OffsetScrollBehavior extends ScrollBehavior {
  const OffsetScrollBehavior();

  @override
  void ensureVisible(
    ScrollPosition position,
    RenderObject object, {
    double alignment = 0.0,
    Duration duration = Duration.zero,
    Curve curve = Curves.ease,
    EdgeInsets margin = EdgeInsets.zero,
  }) {
    super.ensureVisible(
      position,
      object,
      alignment: alignment,
      duration: duration,
      curve: curve,
      // 全局给所有焦点滚动添加上部偏移
      margin: margin + const EdgeInsets.only(top: 20.0),
    );
  }
}

2. 在MaterialApp中注册自定义滚动行为

MaterialApp(
  scrollBehavior: const OffsetScrollBehavior(),
  // 其他应用配置项
  home: const HomePage(),
)

内容的提问来源于stack exchange，提问作者Иван Чернокнижников