如何更改 TextField 工具栏样式？答案

【问题标题】：How Can I Change TextField Toolbar Style?如何更改 TextField 工具栏样式？
【发布时间】：2019-08-29 08:33:51
【问题描述】：

我想更改 TextField 的工具栏的填充/背景颜色/字体大小。（当您长按 TextField 时，工具栏将显示。）。我该怎么办？我阅读了 text_field.dart 和 text_selection.dart 但没有找到答案。

我注意到，当我使用 materialTapTargetSize: MaterialTapTargetSize.padded 时，它有助于更改 Textfield Toolbar 的填充，但我发现更改它的样式（例如背景颜色、跨度颜色等）没有任何帮助。

这是我的代码。我简化了代码。 main.dart 中的这段代码。 TextField 在另一个 dart 文件中。

MaterialApp(
      theme: ThemeData(
        splashColor: Colors.transparent,
        highlightColor: Colors.transparent,
        primaryColorBrightness: Brightness.light,
        buttonTheme: ButtonThemeData(
          minWidth: 0,
          padding: EdgeInsets.all(0), // Notice this
          materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
          splashColor: Colors.transparent,
          highlightColor: Colors.transparent,
        ),home:SizedBox()
 )

当我改变填充时，TextField Toolbar Padding会改变。我有点困惑，当主题不变时如何改变它。我发现 TextStyle 没有任何帮助。

TextField(
              style: CustomTextStyle.textField14TextStyle,
              keyboardType: widget.keyboardType,
              autocorrect: false,
              enableInteractiveSelection: true,
              decoration: InputDecoration(
                hintText: _getHintText(),
                hintStyle: CustomTextStyle.minorGray14TextStyle,
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: widget.isError ? Color(0xffbb424a) : Color(0xff333333)),
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: widget.isError ? Color(0xffbb424a) : CustomColor.obviousTextColor),
                ),
                contentPadding: EdgeInsets.symmetric(vertical: Global.isShortScreen ? 15 : 20),
              ),
              onSubmitted: (text) {
                if (widget.onSubmitted != null) {
                  widget.onSubmitted();
                }
              },
              controller: widget.controller,
              cursorColor: CustomColor.obviousTextColor,
            )

我尝试使用 Material( child: Theme(data:ThemeData(),child:TextField()) 之类的东西，但它不起作用。

【问题讨论】：

你能和我们分享一下SS吗？
什么是SS？@secret35
可以分享截图吗？
如果你在 Flutter 中使用 TextField，你会得到相同的 UI，所以，截图是没有用的。我的问题是问 TextField Toolbar，而不是 TextField。如果你长按 TextField，工具栏会显示。可以先试试吗？谢谢。

标签： android ios flutter

【解决方案1】：

要更改文本选择颜色，您可以使用textSelectionTheme

cursorColor 用于光标行

selectionHandleColor 表示光标下方的气泡

selectionColor 用于高亮颜色

textSelectionTheme: _theme.textSelectionTheme.copyWith(
        cursorColor: AppColors.purple,
        selectionHandleColor: AppColors.purple,
        selectionColor: AppColors.grey4,
 ),

要更改文本工具栏选项样式，可以使用button textTheme

textTheme: _theme.textTheme
          .copyWith(
            button: _theme.textTheme.button?.copyWith(
              //here
            ), 
          )
          .apply(fontFamily: GoogleFonts.roboto().fontFamily),

【讨论】：