Flutter RichText支持文本选择

时间 2019-11-05

标签 flutter richtext 支持文本选择繁體版

原文原文链接

extended text 相关文章

群花某天说，你咋不作下文本选择的需求呢，刚需呢。是吗？我咋都没看到有人提过呢？git

前面作了extended_text_field,里面有光标和文本选择的处理，原本想直接把改改，把光标去掉,而后不让修改。可是想了下，怎么能这么随便呢，仍是拿起了extended_text魔改起来。github

参数	描述	默认
selectionEnabled	是否开启文本选择功能	false
selectionColor	文本选择的颜色	Theme.of(context).textSelectionColor
dragStartBehavior	文本选择的拖拽行为	DragStartBehavior.start
textSelectionControls	文本选择控制器，你能够经过重写，来定义工具栏和选择器	extendedMaterialTextSelectionControls/extendedCupertinoTextSelectionControls

文本选择控制器

extended_text提供了默认的控制器extendedMaterialTextSelectionControls/extendedCupertinoTextSelectionControlsmarkdown

你能够经过重写，来定义工具栏和选择器less

下面是一个自定义的工具栏ide

class MyExtendedMaterialTextSelectionControls extends ExtendedMaterialTextSelectionControls {
  @override
  Widget buildToolbar(BuildContext context, Rect globalEditableRegion,
      Offset position, TextSelectionDelegate delegate) {
    assert(debugCheckHasMediaQuery(context));
    assert(debugCheckHasMaterialLocalizations(context));
    return ConstrainedBox(
      constraints: BoxConstraints.tight(globalEditableRegion.size),
      child: CustomSingleChildLayout(
        delegate: ExtendedTextSelectionToolbarLayout(
          MediaQuery.of(context).size,
          globalEditableRegion,
          position,
        ),
        child: _TextSelectionToolbar(
          handleCopy: canCopy(delegate) ? () => handleCopy(delegate) : null,
          handleSelectAll:
              canSelectAll(delegate) ? () => handleSelectAll(delegate) : null,
          handleLike: () {
            //mailto:<email address>?subject=<subject>&body=<body>, e.g.
            launch(
                "mailto:zmtzawqlp@live.com?subject=extended_text_share&body=${delegate.textEditingValue.text}");
            delegate.hideToolbar();
          },
        ),
      ),
    );
  }
}

/// Manages a copy/paste text selection toolbar.
class _TextSelectionToolbar extends StatelessWidget {
  const _TextSelectionToolbar(
      {Key key, this.handleCopy, this.handleSelectAll, this.handleLike})
      : super(key: key);

  final VoidCallback handleCopy;
  final VoidCallback handleSelectAll;
  final VoidCallback handleLike;

  @override
  Widget build(BuildContext context) {
    final List<Widget> items = <Widget>[];
    final MaterialLocalizations localizations =
        MaterialLocalizations.of(context);

    if (handleCopy != null)
      items.add(FlatButton(
          child: Text(localizations.copyButtonLabel), onPressed: handleCopy));
    if (handleSelectAll != null)
      items.add(FlatButton(
          child: Text(localizations.selectAllButtonLabel),
          onPressed: handleSelectAll));
    if (handleLike != null)
      items.add(FlatButton(child: Icon(Icons.favorite), onPressed: handleLike));

    return Material(
      elevation: 1.0,
      child: Container(
        height: 44.0,
        child: Row(mainAxisSize: MainAxisSize.min, children: items),
      ),
    );
  }
}

复制代码

工具栏和选择器的控制

你能够经过将你的页面包裹到ExtendedTextSelectionPointerHandler里面来定义不一样的行为效果。svg

默认行为

经过赋值ExtendedTextSelectionPointerHandler的child为你的页面，将会有默认的行为工具

return ExtendedTextSelectionPointerHandler(
      //default behavior
       child: result,
    );
复制代码

当点击extended_text以外的区域的时候，关闭工具栏和选择器
滚动的时候，关闭工具栏和选择器

自定义行为

你能够经过builder方法获取到页面上面的所有的selectionStates(ExtendedTextSelectionState)，而且经过本身获取点击事件来处理工具栏和选择器post

return ExtendedTextSelectionPointerHandler(
      //default behavior
      // child: result,
      //custom your behavior
      builder: (states) {
        return Listener(
          child: result,
          behavior: HitTestBehavior.translucent,
          onPointerDown: (value) {
            for (var state in states) {
              if (!state.containsPosition(value.position)) {
                //clear other selection
                state.clearSelection();
              }
            }
          },
          onPointerMove: (value) {
            //clear other selection
            for (var state in states) {
              state.clearSelection();
            }
          },
        );
      },
    );
复制代码

关于extended_text的readme

最近从新整理了一下readme，而且提供了中文文档，由于你们总是吐槽不容易看，但愿新的readme能帮助你们更好地使用这个组件。ui

最后放上 extended_text，若是你有什么不明白或者对这个方案有什么改进的地方，请告诉我，欢迎加入Flutter Candies，一块儿生产可爱的Flutter 小糖果(QQ群:181398081)this

最最后放上Flutter Candies全家桶，真香。