RichText样式不符合预期

Question

只需创建一个项目，即可：

> flutter create simple

并添加了一个RichText小部件， 但结果却不是我所期望的：默认样式的文本，只有粗体字和粗体字。 在我的android设备上，我得到了：

完整的main.dart：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new RichText(
              text: new TextSpan(
                text: 'Hello ',
                style: DefaultTextStyle.of(context).style,
                children: <TextSpan>[
                  new TextSpan(
                      text: 'bold',
                      style: new TextStyle(fontWeight: FontWeight.bold)),
                  new TextSpan(text: ' world!'),
                ],
              ),
            ),
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), 
    );
  }
}

我想念什么？ “红色”主题从何而来？

Answer 1

如果有任何DefaultTextStyle.of(context)父级，并且从父级中获取样式，将使用DefaultTextStyle。因此，请尝试将整个HomePage小部件以某种样式包装在DefaultTextStyle小部件中。或将RichText设为单独的小部件，然后将其包装在DefaultTextStyle中。

示例：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new DefaultTextStyle(style: Theme.of(context).textTheme.title, child: new RichWidget()),
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ),
    );
  }
}

class RichWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new RichText(
      text: new TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          new TextSpan(
              text: 'bold',
              style: new TextStyle(fontWeight: FontWeight.bold)),
          new TextSpan(text: ' world!'),
        ],
      ),
    );
  }
}

希望这会有所帮助！

Answer 2

您现在可以做的简单得多。

如果您想使用默认的RichText创建一个TextStyle，只需使用Text.rich：

Text.rich(
  TextSpan(
    children: [
      TextSpan(text: 'Hello '),
      TextSpan(
        text: 'bold',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(text: ' world!'),
    ],
  ),
)