最简单的flutter例子,以及MaterialApp详解

2022年7月7日 847点热度 0人点赞 0条评论

效果:
最简单的flutter例子,以及MaterialApp详解插图

代码:

<code>import &#039;package:flutter/material.dart&#039;;

main(){
   runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
     home: Scaffold(
        appBar: AppBar(
           title:const Text(&quot;这是我的第一个程序&quot;),
            centerTitle:true
        ),
        body: const Center(
            child:Text(&quot;HelloWorld&quot;,textDirection:TextDirection.ltr)
        ),
     ),
   ));
}</code>

main():这是程序入口
runApp():这是程序入口方法,需要传入一个widget。
MaterialApp :谷歌纸墨设计(Material Design)风格或者规范。简单来说,它提供了非常多的界面元素设计规范,比如:文字的排版、颜色、填充、响应动画等等。
MaterialApp这个部件我们现在只关注home这个命名可选参数。

<code>MaterialApp 主要属性如下:

title : 在任务管理窗口中所显示的应用名字
theme : 应用各种 UI 所使用的主题颜色
color : 应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色
home : 应用默认所显示的界面 Widget
routes : 应用的顶级导航表格,这个是多页面应用用来控制页面跳转的,类似于网页的网址
initialRoute :第一个显示的路由名字,默认值为 Window.defaultRouteName
onGenerateRoute : 生成路由的回调函数,当导航的命名路由的时候,会使用这个来生成界面
onLocaleChanged : 当系统修改语言的时候,会触发å这个回调
navigatorObservers : 应用 Navigator 的监听器
debugShowMaterialGrid : 是否显示 纸墨设计 基础布局网格,用来调试 UI 的工具
showPerformanceOverlay : 显示性能标签,https://flutter.io/debugging/#performanceoverlay
checkerboardRasterCacheImages 、showSemanticsDebugger、debugShowCheckedModeBanner 各种调试开关</code>

小小调酒师

此刻打盹,你将做梦; 此刻学习,你将圆梦。 个人邮箱:shellways@foxmail.com

文章评论