中秋活动:订阅年付会员送 6 个月,重订、续订送 12 个月。订阅 →

Flutter 移动应用开发 #3:Material 应用

Material,是 Google 推行的一套设计语言,也可以理解成是一套设计规范或者设计风格。它给我们提供了很多关于如何设计应用的参考,比如颜色怎么搭配,各种界面组件怎么设计,元素之间的距离,动画等等。Flutter 是 Google 做的开发移动应用的东西,它里面很多地方都用到了这套 Material 设计系统,比如颜色,还提供了各种 Material 风格的界面组件,在开发应用的时候,我们可以直接拿过来用。

下面是在宁皓网 Flutter 移动应用开发课程里做的演示,里面用到了一些 Material 小部件,比如工具栏,底部导航栏,抽屉等等。这些小部件的用法会在后面的课程里介绍到。学习它们的最好的方法就是,一个一个的来。通过一些小练习,慢慢就会发现规律,脑子里就会有概念了,也会形成一套设计与开发的思维方式。

订阅宁皓网,可以在线学习用 Flutter 开发 iOS 与 Android 应用。

MaterialApp

在应用里要使用 Material 风格的一些小部件,可以先把它们放在一个 MaterialApp 小部件里面。

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Hello(),
    );
  }
}

这个 MaterialApp 小部件里有很多属性,暂时先只用它的一个 home 属性,设置一下初始显示的小部件。这里我们把它设置成了 Hello,一个之前我们自定义的小部件,它会在屏幕中间显示一个 hello 文字。

模拟器右上角会有一个 debug 小条幅,可以在 MaterialApp 里面用 debugShowCheckedModeBanner 属性去掉它:

debugShowCheckedModeBanner: false,

Scaffold:界面结构

Scaffold 给应用界面提供了一个骨架,一个结构。比如我们可以在它里面设置应用的工具栏,界面主体,底部导航栏等等。下面可以把 MaterialApphome 属性换成一个 Scaffold 小部件,不过可以把它单独放在一个小部件里面,起个名字叫 Home

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Hello()
    );
  }
}

在这个自定义的 Home 小部件里,用了一个 Scaffold,里面设置了它的 body 属性,它的值就是界面的主体内容,这里用了一个之前自定义的 Hello 小部件。

AppBar:应用工具栏

界面顶部可以放一个工具栏,上面可以显示标题,一些动作小图标,还有标签栏这些东西。这个 AppBar 小部件一般会作为 Scaffold 小部件的 appBar 属性的值。

appBar: AppBar(
  title: Text('NINGHAO'),
),

在屏幕顶部会出现一个应用工具栏,默认标题会居中,颜色是蓝色,工具栏带阴影效果。

AppBar 里面,标题左边那块地方叫 Leading,右边那片叫 Actions,在这两边你都可以添加点东西。有些部件默认会在 Leading 位置上添加图标按钮,比如抽屉(Drawer)小部件。

在 AppBar 里添加 leadingactions 属性:

appBar: AppBar(
  title: Text('NINGHAO'),
  leading: Icon(Icons.menu),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () => debugPrint('Search'),
    ),
  ],
),

leading 上面我用了一个简单的 Icon  小部件,显示了一个菜单小图标。暂时它并不能做什么,只是为你演示了 Leading 这个位置在哪里。后面学习使用 Drawer 的时候会去掉在 Leading 位置上添加的这个菜单小图标,因为 Drawer 会自动添加一个用来打开抽屉的菜单小图标。

actions 属性的值是一组 Widget ,也就是你可以在 Action 位置上添加一组内容(Widget)。暂时我们只用了一个 IconButton 添加了一个图标按钮。点击按钮要执行的任务是 onPressed 属性设置的,先让它在调试控制台上输出一个 Search 文字。

打开 VS Code 编辑器的 “调试控制台”(macOS:shift + command + Y),点击右上角的搜索图标按钮,观察在调试控制台上输出的文字。

Elevation:层与层之间的距离

Elevation,是 Material Design 里的一个概念,它表示的就是层与层之间的那个距离,或者叫高度。

在前面我们在界面上添加的 AppBar 的底部,会有一个阴影效果。使用 AppBar 的 elevation 属性,可以控制这个阴影效果的大小,或者叫这个工具栏与它下面一层内容之间的高度。默认它的值是 4.0,你可以设置成一个更大的数字,或者更小的数字,然后观察它对这个阴影效果的影响。如果把它的值设置成 0.0 的话,那这个阴影会完成消失。

Theme:主题

MaterialApp 有个默认的主题,比如之前添加的应用工具栏的背景颜色会是一种蓝色,这就是默认主题的其中的一部分。主题里的 primarySwatch 或者 primaryColor 会影响到这个工具栏的背景颜色。

MaterialApp 里面,添加一个 theme 属性,先把它的值设置成 ThemeData.dark(),这样应用界面会使用一个暗色主题:

MaterialApp(
  theme: ThemeData.dark(),
  ...
);

我还想要使用亮色主题,但是想换一种颜色,比如黄色:

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.yellow,
  ),
  ...
);

订阅宁皓网,可以在线学习用 Flutter 开发 iOS 与 Android 应用。

评论

日常催更,不够看啊

努力 ~~

期待更新中~



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

11228
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点