Flutter Web如何实现点击任意位置取消SelectableText文本选中

DevOps 小满

2026-9-27

原因分析

出现该问题的核心原因是Scaffold组件默认会占满整个页面视口区域，空白区域的点击事件会被Scaffold直接消费，不会向上传递到根节点默认的取消文本选中逻辑。而移除Scaffold后，空白区域的点击事件可以正常触发系统默认的清除选中逻辑，才会表现为正常。

解决方案

你可以通过全局监听点击事件，手动触发选中清除来实现需求，改动成本很低：

单SelectableText场景

给SelectableText绑定FocusNode，外层套GestureDetector监听全局点击，点击时让文本失去焦点即可清除选中：

import 'package:flutter/material.dart';

class MainPageWidget extends StatefulWidget {
  const MainPageWidget({super.key});

  @override
  State<MainPageWidget> createState() => _MainPageWidgetState();
}

class _MainPageWidgetState extends State<MainPageWidget> {
  final FocusNode _selectableTextFocus = FocusNode();

  @override
  void dispose() {
    _selectableTextFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_selectableTextFocus.hasFocus) {
          _selectableTextFocus.unfocus();
        }
      },
      child: Scaffold(
        body: SelectableText(
          "This is a selectable text",
          focusNode: _selectableTextFocus,
        ),
      ),
    );
  }
}

多SelectableText场景

如果页面存在多个可选中文本，不需要逐个绑定FocusNode，直接调用全局焦点清除方法即可：

class MainPageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).unfocus(),
      child: const Scaffold(
        body: Column(
          children: [
            SelectableText("第一段可选文本"),
            SelectableText("第二段可选文本"),
          ],
        ),
      ),
    );
  }
}