flutter web中网页的复制粘贴体验

最近用 flutter web 实践了下 markdown 阅读功能，全局 Widget 开启了 selectable ，选中是可以了，但粘滞感严重，多行选中也不支持，查询了相关资料发现 flutter web 中 widget 默认不支持 select ，虽然后面有了 SelectArea 组件，但选中还是体验不佳，感觉选中复制这也能算是 flutter web 一大遗憾啊，有什么优化方案吗？

htzhanglong 1楼•4 个月前

你说的选中是指选择文本吧？官方 3.3 出了一个 SelectionArea ，应该也就是你说的“SelectArea”。
不过我实际应用中还没怎么实践过，你可以试试切换 web 渲染模式为 html / canvas 试试？

更多关于flutter web中网页的复制粘贴体验的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 2楼•4 个月前

我切换的是 html 模式复制粘贴体验也不佳，可能需要重写 flutter_markdown

vueper 3楼•4 个月前

你用了第三方控件，那么控制变量，你可以用 flutter 原生控件看看选文本的体验，以确定是不是控件的问题。

gougou168 4楼•4 个月前

嗯，试过，多选效果体验感觉始终比纯 html 的多选差那么点，查资料有说如果 web 页面需求如果强依赖多选复制类的，建议不要用 flutter 技术😆

bupafengyu 5楼•4 个月前

可以试一下 markdown_widget ，虽然还是有一些需要 flutter 填坑的地方，不过体验会比没关系这块的 flutter_markdown 要好

eggper 6楼•4 个月前

关于Flutter Web中网页的复制粘贴体验，这里有一些专业的建议和优化方法。

首先，确保你的Flutter项目中已经集成了WebView插件，推荐使用Flutter团队官方提供的webview_flutter插件。这个插件可以帮助你在Flutter应用中嵌入WebView，并加载你想要显示的网页。

默认情况下，WebView中可能不启用文本选择模式，这意味着用户可能无法进行复制、粘贴和选择操作。为了解决这个问题，你可以使用JavascriptChannel来与WebView进行通信，并执行一段JavaScript代码来启用文本选择模式。具体来说，你可以设置webview的javascriptMode为JavascriptMode.unrestricted，并在网页加载完成后，使用evaluateJavascript方法执行以下JavaScript代码：

document.body.style.webkitUserSelect='text';
document.body.style.webkitTouchCallout='default';

这段代码会将WebView的webkitUserSelect属性设置为text，从而启用文本选择模式。

此外，对于Android设备，如果长按不显示复制粘贴菜单，你可以尝试设置gestureRecognizers属性，为WebView添加一个LongPressGestureRecognizer。这样，当用户长按文本时，就会显示复制粘贴菜单。

总的来说，通过合理配置WebView插件的属性，以及使用JavaScript代码和手势识别器，你可以显著提升Flutter Web中网页的复制粘贴体验。这将使用户能够更方便地复制和粘贴网页中的文本内容，从而提高他们的使用满意度。