自定义主题无法正常工作。[扑]

【字号: 日期:2024-02-19浏览:47作者:雯心
如何解决自定义主题无法正常工作。[扑]?

这context与Theme.of工作方式和工作方式有关。

从Theme类的源代码:

static ThemeData of(BuildContext context, { bool shadowThemeOnly = false }) { final _InheritedTheme inheritedTheme =context.inheritFromWidgetofExactType(_InheritedTheme); if (shadowThemeOnly) { if (inheritedTheme == null || inheritedTheme.theme.isMaterialAppTheme)return null; return inheritedTheme.theme.data; } final ThemeData colorTheme = (inheritedTheme != null) ? inheritedTheme.theme.data : _kFallbackTheme; final MaterialLocalizations localizations = MaterialLocalizations.of(context); final TextTheme geometryTheme = localizations?.localTextGeometry ?? MaterialTextGeometry.englishLike; return ThemeData.localize(colorTheme, geometryTheme); }

Theme.of(以及Navigator.of()...、. of()等),查看传递它们的上下文,然后向上遍历小部件树,以查找指定类型的小部件。

现在,查看您的代码

Widget build(BuildContext context) { return new MaterialApp(theme: _buildDarkTheme(),home: new Scaffold( appBar: _buildAppBar(), body: new Container( color: Theme.of(context).accentColor,

您可以看到,context您传入Theme.of的实际上是您正在创建的主题上方的上下文。因此,它将找不到您的主题,并将恢复为默认主题。这是因为窗口小部件树看起来类似于以下内容(忽略所有中间层,其中箭头指向您正在使用的上下文)。

MyApp - context <-------- MaterialApp Theme Scaffold

有两种方法可以解决此问题;第一种是使用一个Builder类在闭包内构建您的窗口小部件,闭包具有位于主题下方的上下文。看起来像这样:

class MyApp extends StatelessWidget { MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return new MaterialApp(theme: _buildDarkTheme(), home: new Scaffold( appBar: _buildAppBar(), body: new Builder(builder: (context) => new Container( color: Theme.of(context).accentColor, height: double.infinity, child: new ListView.builder(... ))

这将使一棵树看起来像这样:

MyApp - context MaterialApp Theme ScaffoldBuilder - context <---------

另一个(首选)选项是将构建器的代码拆分为自己的类- StatelessWidget继承的类或StatefulWidgetand State对。

解决方法

我为我的应用创建了以下主题:

ThemeData _buildDarkTheme() { final baseTheme = ThemeData(fontFamily: 'Sunflower',); return baseTheme.copyWith( brightness: Brightness.dark,primaryColor: Colors.grey[800],accentColor: Colors.grey[850]);}

然后,将其应用于我的应用程序,如下所示:

class MyApp extends StatelessWidget { MyApp({Key key}) : super(key: key); @override Widget build(BuildContext context) { return new MaterialApp(theme: _buildDarkTheme(),home: new Scaffold( appBar: _buildAppBar(),body: new Container( color: Theme.of(context).accentColor,height: double.infinity,child: new ListView.builder(...

但是,当我尝试访问容器(或其他位置)内部的强调颜色而不是预期的Colors.grey[850]时,它默认使用蓝色。另外,尝试使用自定义字体Sunflower字体系列不起作用,但是当我改用

new Text('Hello World',style: new TextStyle(fontFamily: 'Sunflower'))

字体正确显示。

我是初学者,所以对解决这些问题的任何帮助将不胜感激。

相关文章: