extended text 相關(guān)文章
- Flutter RichText支持圖片顯示和自定義圖片效果
- Flutter RichText支持自定義文本溢出效果
- Flutter RichText支持自定義文字背景
- Flutter RichText支持特殊文字效果
- Flutter RichText支持文本選擇
群花某天說(shuō)，你咋不做下文本選擇的需求呢，剛需呢鞋拟。是嗎演闭？ 我咋都沒(méi)看到有人提過(guò)呢汹买？
前面做了extended_text_field,里面有光標(biāo)和文本選擇的處理盟萨，本來(lái)想直接把改改岔绸，把光標(biāo)去掉,然后不讓修改蔽莱。但是想了下，怎么能這么隨便呢泳猬，還是拿起了extended_text魔改起來(lái)批钠。
| 參數(shù) | 描述 | 默認(rèn) |
|---|---|---|
| selectionEnabled | 是否開啟文本選擇功能 | false |
| selectionColor | 文本選擇的顏色 | Theme.of(context).textSelectionColor |
| dragStartBehavior | 文本選擇的拖拽行為 | DragStartBehavior.start |
| textSelectionControls | 文本選擇控制器，你可以通過(guò)重寫得封，來(lái)定義工具欄和選擇器 | extendedMaterialTextSelectionControls/extendedCupertinoTextSelectionControls |
文本選擇控制器
extended_text提供了默認(rèn)的控制器extendedMaterialTextSelectionControls/extendedCupertinoTextSelectionControls
你可以通過(guò)重寫埋心，來(lái)定義工具欄和選擇器
下面是一個(gè)自定義的工具欄
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),
),
);
}
}
工具欄和選擇器的控制
你可以通過(guò)將你的頁(yè)面包裹到ExtendedTextSelectionPointerHandler里面來(lái)定義不同的行為效果。
默認(rèn)行為
通過(guò)賦值ExtendedTextSelectionPointerHandler的child為你的頁(yè)面忙上，將會(huì)有默認(rèn)的行為
return ExtendedTextSelectionPointerHandler(
//default behavior
child: result,
);
- 當(dāng)點(diǎn)擊extended_text之外的區(qū)域的時(shí)候拷呆，關(guān)閉工具欄和選擇器
- 滾動(dòng)的時(shí)候，關(guān)閉工具欄和選擇器
自定義行為
你可以通過(guò)builder方法獲取到頁(yè)面上面的全部的selectionStates(ExtendedTextSelectionState)疫粥，并且通過(guò)自己獲取點(diǎn)擊事件來(lái)處理工具欄和選擇器
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();
}
},
);
},
);
關(guān)于extended_text的readme
最近重新整理了一下readme茬斧，并且提供了中文文檔，因?yàn)榇蠹依鲜峭虏鄄蝗菀卓垂４Ｍ碌膔eadme能幫助大家更好地使用這個(gè)組件项秉。
最后放上 extended_text，如果你有什么不明白或者對(duì)這個(gè)方案有什么改進(jìn)的地方慷彤，請(qǐng)告訴我娄蔼，歡迎加入Flutter Candies怖喻，一起生產(chǎn)可愛(ài)的Flutter 小糖果(QQ群:181398081)
最最后放上Flutter Candies全家桶，真香岁诉。
