Flutter:如何为SelectableText~构建自定义工具栏

Question

我正在构建一个聊天应用程序，我需要一个功能，可以允许用户从小部件中选择文本，还可以显示我的一些自定义操作，如删除该消息、共享等。

我发现SelectableText小部件会很有帮助，但它唯一的缺点是，我必须创建一个自定义的TextSelectionControls类，并将其传递给SelectableText小工具selectionControls属性，以便添加我自己的操作，但我真的不知道该怎么做，所以有人知道如何创建这种类吗

我已经访问了这个链接：Github:自定义文本选择菜单示例，但在我复制并粘贴他的代码后，它在编译时显示了以下错误消息：

Missing concrete implementations of 'TextSelectionControls.buildHandle', 'TextSelectionControls.getHandleAnchor', and 'TextSelectionControls.getHandleSize'.

尝试实现缺失的方法，或者使类抽象。dart(non_abstract_class_inherits_abstrac_member(

但我不认为我错过了什么，因为Github上的人没有，所以是因为Flutter框架本身的问题吗

Answer 1

您提供的链接中的代码可以工作。你确定你在使用吗

class MyMaterialTextSelectionControls extends MaterialTextSelectionControls

以下是重构的工作示例

class MyMaterialTextSelectionControls extends MaterialTextSelectionControls {
// Padding between the toolbar and the anchor.
static const double _kToolbarContentDistanceBelow = 10.0;
static const double _kToolbarContentDistance = 8.0;
/// Builder for material-style copy/paste text selection toolbar.
@override
Widget buildToolbar(
BuildContext context,
Rect globalEditableRegion,
double textLineHeight,
Offset selectionMidpoint,
List<TextSelectionPoint> endpoints,
TextSelectionDelegate delegate,
ClipboardStatusNotifier clipboardStatus,
Offset? lastSecondaryTapDownPosition,
) {
final TextSelectionPoint startTextSelectionPoint = endpoints[0];
final TextSelectionPoint endTextSelectionPoint =
endpoints.length > 1 ? endpoints[1] : endpoints[0];
final Offset anchorAbove = Offset(
globalEditableRegion.left + selectionMidpoint.dx,
globalEditableRegion.top +
startTextSelectionPoint.point.dy -
textLineHeight -
_kToolbarContentDistance,
);
final Offset anchorBelow = Offset(
globalEditableRegion.left + selectionMidpoint.dx,
globalEditableRegion.top +
endTextSelectionPoint.point.dy +
_kToolbarContentDistanceBelow,
);
final value = delegate.textEditingValue;
return MyTextSelectionToolbar(
anchorAbove: anchorAbove,
anchorBelow: anchorBelow,
clipboardStatus: clipboardStatus,
handleCustomButton: () {
print(value.selection.textInside(value.text));
delegate.hideToolbar();
},
);
}
}
class MyTextSelectionToolbar extends StatelessWidget {
const MyTextSelectionToolbar({
Key? key,
required this.anchorAbove,
required this.anchorBelow,
required this.clipboardStatus,
required this.handleCustomButton,
}) : super(key: key);
final Offset anchorAbove;
final Offset anchorBelow;
final ClipboardStatusNotifier clipboardStatus;
final VoidCallback? handleCustomButton;
@override
Widget build(BuildContext context) {
assert(debugCheckHasMaterialLocalizations(context));
final List<_TextSelectionToolbarItemData> items =
<_TextSelectionToolbarItemData>[
_TextSelectionToolbarItemData(
onPressed: handleCustomButton ?? () {},
label: 'Custom button',
),
];
int childIndex = 0;
return TextSelectionToolbar(
anchorAbove: anchorAbove,
anchorBelow: anchorBelow,
toolbarBuilder: (BuildContext context, Widget child) =>
Container(color: Colors.pink, child: child),
children: items
.map((_TextSelectionToolbarItemData itemData) =>
TextSelectionToolbarTextButton(
padding: TextSelectionToolbarTextButton.getPadding(
childIndex++, items.length),
onPressed: itemData.onPressed,
child: Text(itemData.label),
))
.toList(),
);
}
}
class _TextSelectionToolbarItemData {
const _TextSelectionToolbarItemData({
required this.label,
required this.onPressed,
});
final String label;
final VoidCallback onPressed;
}

不管怎样，你都可以检查这个包裹text_selection_controls

Answer 2

随着Flutter 3.7的发布，您可以轻松地将自定义上下文操作添加到任何小部件中，包括文本小部件。

SelectableText(
'My Text',
contextMenuBuilder: (context, editableTextState) {
return AdaptiveTextSelectionToolbar(
anchors: editableTextState.contextMenuAnchors,
children: [
InkWell(
onTap: (){},
child: SizedBox(
width: 200.0,
child: Text('Note'),
),
)
]);
},
),

更多的例子可以在这里找到。