Question

我正在尝试使用MaterialApp主题中的AppBarTheme在我的应用程序中的任何地方实现透明的应用程序栏。但这导致文本大小默认为14.0，而不是标题大小。

我想这与TextStyle继承有关，但我对此了解不多。

示例代码：

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = ThemeData();
    return MaterialApp(
      theme: theme.copyWith(
        appBarTheme: AppBarTheme(
          color: Colors.transparent,
          brightness: Brightness.light,
          elevation: 0,
          //I want the defaults, which is why I'm copying an 'empty' ThemeData
          //perhaps there's a better way to do this?
          textTheme: theme.textTheme,
          iconTheme: theme.iconTheme,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar!'),
        ),
        body: Text('Some text'),
      ),
    );
  }
}

Answer 1

这可以通过在 AppBarTheme 中指定 textTheme 来实现。

实际上， AppBarTheme（）具有一个完全可自定义的参数，该参数采用 TextTheme 。您的问题中差点遇到了。

尝试：

  class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = ThemeData();
    return MaterialApp(
      theme: theme.copyWith(
        appBarTheme: AppBarTheme(
          color: Colors.transparent,
          brightness: Brightness.light,
          elevation: 0,
          //I want the defaults, which is why I'm copying an 'empty' ThemeData
          //perhaps there's a better way to do this?
          textTheme: theme.textTheme.copyWith(
            title: theme.textTheme.title.copyWith(fontSize: 20.0),
          ),
          iconTheme: theme.iconTheme,
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar!'),
        ),
        body: Text('Some text'),
      ),
    );
  }
}

文本主题具有一个 title 参数，您可以在其中设置 fontSize 。标题的默认 fontSize 是20.0。

注意以下行：

textTheme: theme.textTheme.copyWith(
                title: theme.textTheme.title.copyWith(fontSize: 20.0),
              ),

您可以阅读有关TextTheme class here

的更多信息

每个参数都是可自定义的，显示了Flutter的功能。

Answer 2

您可以像这样使用Theme.of(context)：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: Theme.of(context).copyWith(
      appBarTheme: AppBarTheme(
        color: Colors.transparent,
        brightness: Brightness.light,
        elevation: 0,
        textTheme: Theme.of(context).textTheme,
        iconTheme: Theme.of(context).iconTheme,
      ),
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text('AppBar!'),
      ),
      body: Text('Some text'),
    ),
  );
}

Answer 3

我找到了解决方案。 MaterialApp->构建器功能。

https://api.flutter.dev/flutter/material/MaterialApp/builder.html

  Widget build(BuildContext context) {
    return MaterialApp(
        builder: (context, widget) {
          var baseTheme = Theme.of(context);
          return Theme(
              data: baseTheme.copyWith(
                appBarTheme: AppBarTheme(color: Colors.transparent),
              ),
              child: widget);
        },
        home: HomeView());
  }

Answer 4

使用了https://github.com/flutter/flutter/issues/38716

中的解决方法

class ExampleScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    ThemeData theme = ThemeData();
    var localizedTheme = ThemeData.localize(theme, theme.typography.geometryThemeFor(ScriptCategory.englishLike));
    theme = theme.copyWith(
      appBarTheme: theme.appBarTheme.copyWith(
        color: Colors.transparent,
        brightness: Brightness.light,
        elevation: 0,
        textTheme: localizedTheme.textTheme,
      ),
    );
    return MaterialApp(
      theme: theme,
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar!'),
        ),
        body: Text('Some text'),
      ),
    );
  }
}

使用AppBarTheme会导致默认文本大小吗？

4 个答案: