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();
            }
          },
        );
      },
    );
複製代碼