flutter 如何使用textTheme更改文本颜色

7qhs6swi  于 2023-04-07  发布在  Flutter
关注(0)|答案(5)|浏览(208)

我试图使一个Android应用程序使用Flutter从教程,当我想改变的颜色的文本根据教程通过:

children: [
  text(
    'Hi Yoikers!',
    style: Theme.of(context).textTheme.headlineSmall.copyWith(color: Colors.white),
  ),
],

程序错误:

The method 'copyWith' can't be unconditionally invoked because the receiver can be 'null'.
Try making the call conditional (using '?.') or adding a null check to the target ('!').

你们能帮我写代码吗,谢谢。

omjgkv6w

omjgkv6w1#

对上述答案的补充,请尝试使用“?”

style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: Colors.white),
ogsagwnx

ogsagwnx2#

错误信息是在说明copyWith方法的接收者Theme.of(context).textTheme.headlineSmall可以为null,在调用copyWith方法之前需要检查是否为null。

您可以使用null-assertion运算符**!**向目标添加null检查,如下所示:

children: [
  Text(
    'Hi Yoikers!',
    style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.white),
  ),
],

或者,也可以使用null感知运算符**?**.使调用有条件,如下所示:

children: [
  Text(
    'Hi Yoikers!',
    style: Theme.of(context).textTheme.headlineSmall?.copyWith(color: Colors.white),
  ),
],

这两个选项都应该可以修复您遇到的错误。

daupos2t

daupos2t3#

试试我为你修改的代码(我也是道德的初学者)

class TextWidget extends StatefulWidget {
  const TextWidget({Key? key}) : super(key: key);

  @override
  _TextWidgetState createState() => _TextWidgetState();
}

class _TextWidgetState extends State<TextWidget> {
  final _textController = TextEditingController();
  late final FocusNode _focusNode;
  TextSelection? _textSelection;

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    _textController.text = '-> No issue if I remove SelectionContainer.disabled <-';
  }

  @override
  void dispose() {
    _focusNode.dispose();
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final textSpans = <InlineSpan>[
      const TextSpan(text: 'Hey 123 456 789'),
      WidgetSpan(
        child: SelectionContainer(
          child: TextField(
            controller: _textController,
            focusNode: _focusNode,
            style: Theme.of(context)
                .textTheme
                .bodyMedium!
                .copyWith(color: Colors.transparent),
            decoration: InputDecoration(
              border: InputBorder.none,
              isDense: true,
            ),
            onTap: () {
              if (_textSelection != null) {
                _textSelection = null;
                setState(() {});
              }
            },
            onSelectionChanged: (textSelection, _) {
              _textSelection = textSelection;
            },
          ),
        ),
      ),
    ];

    if (_textSelection != null) {
      _focusNode.requestFocus();
      _textController.selection = _textSelection!;
    }

    return Text.rich(TextSpan(children: textSpans));
  }
}

TextWidget通过将TextSelection对象存储在_textSelection变量中来跟踪所选文本。每当文本选择发生变化时,TextField都会调用onSelectionChanged回调,TextWidget会相应地更新_textSelection变量。
build()方法中,TextWidget检查是否有选中的文本,并使用TextEditingController.selection属性在TextField小部件上设置选择。
使用FocusNode.requestFocus()方法聚焦TextField,并将_textSelection变量设置为null,以在点击TextField时清除选择。

tyu7yeag

tyu7yeag4#

使用null check:

style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.white),
dxxyhpgq

dxxyhpgq5#

我想在这里讨论两个问题(也是可能的解决方案)。
1.主题
这通常发生在您没有在MaterialApp中显式提供theme/darkTheme时。
您可以选择提供Theme()小部件,将其 Package 在您现在代码中的Text小部件上。同时确保您有Scaffold。请记住,此主题仅适用于Text小部件。

Theme(
      data: ThemeData(
        textTheme: const TextTheme(
              /// define the ones you will invoke 
               headlineSmall: TextStyle(
                  color: Colors.white,
                   )
                ),
            ),
       child: Text(
                'Hi Yoikers!',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
      ),

1.空感知
为了避免出现运行时错误,请在调用copyWith()之前添加?,这是另一个答案(以及控制台中的Flutter)的建议。这意味着它仅在存在可复制的定义时才复制您指定的值。换句话说,它将忽略您的规范并使用默认值而不会抛出错误。
要获得更多说明,请提供更多代码并添加注解!

相关问题