Flutter中如何使用SelectableText组件

在Flutter中如何使用SelectableText组件实现文本可选择功能？我尝试添加SelectableText到项目中，但发现长按文本时没有出现选择菜单，也无法选中文字。请问需要额外配置什么参数吗？如何调整文本选择的样式，比如选中背景色和光标颜色？另外这个组件在iOS和Android上的表现是否一致？求一个完整的示例代码。

2 回复

在Flutter中使用SelectableText组件，只需导入package:flutter/material.dart，然后直接调用即可。例如：

SelectableText(
  '可选择的文本',
  style: TextStyle(fontSize: 16),
)

支持长按选择文本，并可自定义样式和交互行为。

更多关于Flutter中如何使用SelectableText组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，SelectableText 组件用于显示可选择、可复制的文本，适用于需要用户复制文本内容的场景。以下是基本用法和关键属性说明：

基本用法

import 'package:flutter/material.dart';

class SelectableTextExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SelectableText(
          '这是一段可选择、可复制的文本',
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
}

主要属性

  1. textAlign：文本对齐方式（如 TextAlign.center）
  2. style：文本样式（颜色、字体等）
  3. toolbarOptions：控制工具栏选项
    toolbarOptions: ToolbarOptions(
  copy: true,    // 启用复制
  cut: false,    // 禁用剪切
  selectAll: true, // 启用全选
),
  4. onTap：点击文本时的回调函数
  5. scrollPhysics：滚动物理效果（如 ClampingScrollPhysics()）

完整示例

SelectableText(
  '长按这段文本可显示复制选项，支持用户选择并复制内容。',
  style: TextStyle(fontSize: 16, color: Colors.blue),
  textAlign: TextAlign.center,
  toolbarOptions: ToolbarOptions(copy: true, selectAll: true),
  onTap: () => print('文本被点击'),
)

注意事项

  • 默认支持长按弹出系统文本选择工具栏
  • 在iOS/Android上工具栏行为可能略有差异
  • 可通过 focusNode 属性实现更复杂的焦点控制

通过 SelectableText 可以轻松实现文本选择功能，比普通 Text 组件更适用于需要交互的场景。

回到顶部