关于flutter:Flutter-设计-使您的主题同质化

33次阅读

共计 3533 个字符，预计需要花费 9 分钟才能阅读完成。

如果你和我一样长期面对电脑，分享几个对眼睛有益处的教训

竟可能的室内用自然光，关掉多余的光源
显示器分辨率比例调小，字体大些
如果你须要更多屏幕空间，能够加一个辅助屏幕
可能的话去缓缓适应暗色主题
色彩调的对比度低些
间断工作 2 小时，起来走走让眼睛瞭望下远方

当然并不是所有人都适宜，让本人的眼睛难受就行

这篇文章是通知你如何通过 ThemeData 来全局治理 Flutter 的界面款式。

有一次我我的项目做完，曾经通过了评审，而后产品和我说要调下款式，刷的一下，给我了一个新的 sketch 设计稿，我的心田是抗拒的，然而只能急躁的去剖析这个新版的款式规范，幸好设计师是一个设计学科的硕士做事还算标准。

而后我通过 ThemeData 解决了 90% 的问题，因为我在代码中尽可能的用官网组件，这样在 ThemeData 中还能找到这个对象。

剩下的自定义组件，应为我有抽取公共组件，所以改改就实现了。

浏览倡议，你能够通过我的译文大抵的理解内容，如果感兴趣能够通过原文细细品味，下方有原文链接。

https://medium.com/flutter-co…

https://github.com/GONZALEZD/…

在很多 Flutter 源代码和应用程序中，我察看到一个重复呈现的实际，即通过小部件参数间接增加自定义款式，导致不统一的设计和额定的保护。作为一个集体的例子，我必须保护一个 Flutter 应用程序，其中所有题目有不同的字体大小 (有时字体分量)。

在这篇文章中，我将解释你的重要性的形式，你应该设计您的 Flutter 应用程序，尤其是关注的主题。

在您看来，这些“设置”页面在代码方面的区别是什么？

Settings page 设置页面

在上图中，“设置”页面共享完全相同的代码。在这个档次上，这四种设计之间没有严格的区别。

这外面没有什么神奇的货色: 所有的主题相干的货色都集中在更高的档次，在 MaterialApp widget 中。这个小工具容许你定义两个主题，一个用于 light brightness，另一个用于 dark theme 模式。

此外，如果没有给出任何价值，大多数小部件都会从中检索它们的设计。

小部件正在从 ThemeData (大多数状况下) 设置默认值

让咱们来看一个如何正确做到这一点的例子: Card widget。你能够察看到在设置页面的第三个例子中，形态是直线而不是角。

而只有‘child’属性在代码中应用: Card (child: …)

当你深入研究 Card 小部件是如何设计的时候，你会看到它的形态是如何定义的。上面是无关 Card.shape 属性的代码文档:

/// The shape of the card's [Material].
///
/// Defines the card's [Material.shape].
///
/// If this property is null then [CardTheme.shape] of [ThemeData.cardTheme]
/// is used. If that's null then the shape will be a [RoundedRectangleBorder]
/// with a circular corner radius of 4.0.
final ShapeBorder? shape;

因而，为了确保“一般”卡片共享雷同的设计，您必须定义本人的 ThemeData，并在 MaterialApp 小部件中应用它作为主题 (或 darkTheme)。

ThemeData example() {final base  = ThemeData.dark();
  final mainColor = Colors.lightBlue;
  return base.copyWith(cardColor: Color.lerp(mainColor, Colors.white, 0.2),
    cardTheme: base.cardTheme?.copyWith(color: Color.lerp(mainColor, Colors.black, 0.1),
      margin: EdgeInsets.all(20.0),
      elevation: 0.0,
      shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(14.0),
          side: BorderSide(color: Colors.white24, width: 1)),
    ),
  );
}

下面的代码演示了如何更改卡片设计，然而您能够为来自 Flutter SDK 的简直所有小部件进行更改。此外，您应该将主题相干的内容集中到单个文件中，因为 ThemeData 是一个微小的数据结构。

可怜的是，ThemeData 并不能笼罩所有窗口小部件。例如，您不能在其中定义列表贴片设计。侥幸的是，您能够通过 ListTileTheme 小部件实现这一点。

阐明如何更改列表平铺选定的色彩和填充，而无需在源代码中显式设置页面。

通过 ListTileTheme，咱们能够在不更改页面代码一行的状况下从新定义抉择的题目 / 背景和前景色

ListView.builder(itemBuilder: (context, index) {final value = elements[index];
    return ListTile(
      selected: value == selected,
      title: Text(value.title),
      subtitle: Text(value.message),
      leading: Icon(value.icon),
      onTap: () => setState(() => selected = value),
    );
  },
  itemCount: elements.length,
);

正如您在代码中看到的，与设计没有任何关系。它的长处是防止代码噪声，使其简洁易懂。另外，我喜爱的一点是我所有的办法都很小 (少于 30 行)。

在本文中，咱们理解了如何将利用程序设计集中到 ThemeData 对象中。正如你所了解的，你可能须要浏览很多 Flutter SDK 代码文档，然而当你或者其余共事须要保护它的时候，益处就来了:

防止代码反复
缩小页面中的代码，使代码更易于浏览和了解
确保设计的一致性

然而正如你可能曾经看到的，ThemeData 对象是一个十分大的构造，在一直的演变中。所以，请亲密关注它！

我在开始一个新我的项目时查看 ThemeData

再给你两个小倡议！首先，如果您心愿为您的组件之一进行特定的设计，而不是在构建办法中定制它，您能够将小部件包装到 Theme 小部件中。

当您设计一个新的小部件时，您可能心愿通过从 ThemeData 检索主题信息来模拟 SDK 小部件。您可能曾经看到，从 ThemeData 继承是不正确的形式。相同，您能够通过 InheritedTheme 小部件“扩大”它，并模拟它在 ListTileTheme 小部件中的实现形式。

像平常一样，你能够在这里找到本文应用的源代码和 adobe 设计:

https://github.com/GONZALEZD/…

https://ducafecat.tech/

https://github.com/ducafecat

https://github.com/ducafecat/…

https://getstrapi.cn

https://ducafecat.tech/catego…

https://space.bilibili.com/40…

正文完

flutter

发表至： flutter

2021-07-01

0

关于flutter:上海纽酷信息科技有限公司招聘Flutter开发者-｜-18-～-30k

Flutter-深入布局规则

关于flutter:转换-JSON-API-用-Chopper-和-JsonSerializable

关于flutter:Flutter-实战动画序列共享动画路由动画

关于java:3秒搞定ConcurrentHashMap

关于flutter:Flutter-设计-使您的主题同质化

猫哥说

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

代码

参考

注释

应用程序主题的正确办法是什么？

主题数据涵盖了所有的窗口小部件，对吧？

总结

为了更进一步..

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

Just My Socks（注册教程内含优惠码）

关于flutter:Flutter-设计-使您的主题同质化

猫哥说

老铁记得 转发，猫哥会出现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/40…

原文

代码

参考

注释

应用程序主题的正确办法是什么？

主题数据涵盖了所有的窗口小部件，对吧？

总结

为了更进一步..

往期

开源

GetX Quick Start

新闻客户端

strapi 手册译文

微信探讨群 ducafecat

系列汇合

译文

开源我的项目

Dart 编程语言根底

Flutter 零根底入门

Flutter 实战从零开始 新闻客户端

Flutter 组件开发

Flutter Bloc

Flutter Getx4

Docker Yapi

Just My Socks（注册教程 内含优惠码）

老铁记得转发，猫哥会出现更多 Flutter 好文~~~~

Flutter 实战从零开始新闻客户端

Just My Socks（注册教程内含优惠码）