美文网首页
Flutter入门之旅一(Hello Flutter)

Flutter入门之旅一(Hello Flutter)

作者: flowerflower | 来源:发表于2020-04-10 22:52 被阅读0次
    😝😝

    前言
    Flutter从去年的某个时间段就开始在学习了,回想去年一年也不知道自己干了嘛,似乎打了一年的酱油,甚是惭愧。不过是时候改变了一下,今年会陆续分享Flutter以及数据结构与算法、RAC知识点,关于RAC的话是项目所需,故后期会整理出文章。而对于Flutter这项技术也不能丢下,所以觉得将自己所学习的分享整理出来,一是回顾了基础知识,二是持续输出成就更好的自己。几乎我们学习或者掌握任何一门编程语言都是Hello word开始的,首先让简单入个门先,么慌。分享完基础控件之后,会附带出2个项目。一步一步向前走。

    MaterialApp作为根root,MaterialApp是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget,从源码可以看出该widget的构造方法中有多个参数,但是基本上大多数参数是可以省略的。

    MaterialApp({
      Key key,
      this.title = '', // 设备用于为用户识别应用程序的单行描述
      this.home, // 应用程序默认路由的小部件,用来定义当前应用打开的时候,所显示的界面
      this.color, // 在操作系统界面中应用程序使用的主色。
      this.theme, // 应用程序小部件使用的颜色。
      this.routes = const <String, WidgetBuilder>{}, // 应用程序的顶级路由表
      this.navigatorKey, // 在构建导航器时使用的键。
      this.initialRoute, // 如果构建了导航器,则显示的第一个路由的名称
      this.onGenerateRoute, // 应用程序导航到指定路由时使用的路由生成器回调
      this.onUnknownRoute, // 当 onGenerateRoute 无法生成路由(initialRoute除外)时调用
      this.navigatorObservers = const <NavigatorObserver>[], // 为该应用程序创建的导航器的观察者列表
      this.builder, // 用于在导航器上面插入小部件,但在由WidgetsApp小部件创建的其他小部件下面插入小部件,或用于完全替换导航器
      this.onGenerateTitle, // 如果非空,则调用此回调函数来生成应用程序的标题字符串,否则使用标题。
      this.locale, // 此应用程序本地化小部件的初始区域设置基于此值。
      this.localizationsDelegates, // 这个应用程序本地化小部件的委托。
      this.localeListResolutionCallback, // 这个回调负责在应用程序启动时以及用户更改设备的区域设置时选择应用程序的区域设置。
      this.localeResolutionCallback, // 
      this.supportedLocales = const <Locale>[Locale('en', 'US')], // 此应用程序已本地化的地区列表 
      this.debugShowMaterialGrid = false, // 打开绘制基线网格材质应用程序的网格纸覆盖
      this.showPerformanceOverlay = false, // 打开性能叠加
      this.checkerboardRasterCacheImages = false, // 打开栅格缓存图像的棋盘格
      this.checkerboardOffscreenLayers = false, // 打开渲染到屏幕外位图的图层的棋盘格
      this.showSemanticsDebugger = false, // 打开显示框架报告的可访问性信息的覆盖
      this.debugShowCheckedModeBanner = true, // 在选中模式下打开一个小的“DEBUG”横幅,表示应用程序处于选中模式
    }) 
    

    MaterialApp的构造方法中的每一个参数都是可以省略的,但是官方还是要求[home] ,[routes][onGenerateRoute]这三个参数至少要填写一个。
    备注:笔者后面会讲如何添加路由 ,直接跳转到想去的页面。

    言归正传,Hello world问世!!!

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar( //设置顶部导航栏
              title: Text('Welcome to Flutter'), //导航栏文字
            ),
            body: Center(
              child: Text('Hello world'),
            ),
          ),
        );
      }
    }
    
    
    图片.png

    相关文章

      网友评论

          本文标题:Flutter入门之旅一(Hello Flutter)

          本文链接:https://www.haomeiwen.com/subject/hurdmhtx.html