如何修改TextField文本选择工具栏中“粘贴”按钮的背景色?
如何修改TextField文本选择工具栏中“粘贴”按钮的背景色?
嗨,我之前也踩过这个坑!你直接改Theme的primary颜色没效果太正常了,因为这个粘贴按钮的样式根本不受全局primary色直接控制,得针对文本选择工具栏的按钮单独配置才行~
给你两种实用的解决方法,按需选就行:
方法一:局部Theme快速配置(适合全局/统一样式)
你可以把TextField包在一个局部Theme里,专门针对性设置文本选择工具栏的按钮样式,代码示例如下:
Theme( data: Theme.of(context).copyWith( textSelectionTheme: TextSelectionThemeData( toolbarItemBackgroundColor: Colors.white, // 这里填你想要的背景色 toolbarTextStyle: TextStyle(color: Colors.black), // 顺便可以调整文字颜色,避免和背景色冲突 ), ), child: Container( color: Colors.white, child: TextField( controller: _controller, decoration: InputDecoration(hintText: 'https://example.com'), keyboardType: TextInputType.url, ), ), )
这里的toolbarItemBackgroundColor就是专门管文本选择工具栏里每个按钮(粘贴、复制这些)的背景色的,设置后长按弹出的粘贴按钮背景就会变成你要的颜色啦。
方法二:自定义工具栏按钮(适合高度个性化需求)
如果你想给不同按钮设置不同的样式,或者调整按钮的布局,那可以直接自定义整个工具栏的构建逻辑,代码示例:
TextField( controller: _controller, decoration: InputDecoration(hintText: 'https://example.com'), keyboardType: TextInputType.url, buildContextMenu: (context, editableTextState) { // 定义粘贴按钮 final pasteButton = ContextMenuButtonItem( onPressed: () { // 手动实现粘贴逻辑 Clipboard.getData(Clipboard.kTextPlain).then((value) { if (value != null && value.text != null) { final selectedTextRange = editableTextState.selection; _controller.text = _controller.text.replaceRange( selectedTextRange.start, selectedTextRange.end, value.text!, ); } // 完成后关闭工具栏 editableTextState.hideToolbar(); }); }, child: Container( color: Colors.white, // 这里设置粘贴按钮的背景色 padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8), child: Text('粘贴', style: TextStyle(color: Colors.black)), ), ); return AdaptiveTextSelectionToolbar.buttonItems( anchors: editableTextState.contextMenuAnchors, buttonItems: [pasteButton], // 可以添加其他按钮,比如复制、剪切 ); }, )
这种方式完全由你掌控按钮的样式,想怎么改就怎么改,自由度拉满。
最后再提一句:你之前改的primary: Color(0xFFFFFFFF)之所以没用,是因为这个属性是全局主题的主色,主要管AppBar、悬浮按钮这些组件的颜色,和文本选择工具栏的按钮背景根本不搭边,所以才没生效~
内容来源于stack exchange
相关产品推荐
相关产品推荐

