Flutter组件学习（1）导航栏

目录

初识Flutter工程页面

程序入口

statelessWidget和statefulWidget

MaterialApp和Scaffold

导航栏AppBar

AppBar属性介绍

---

初识Flutter工程页面

我用的是windows电脑，所以目前基于Android studio开发，后期会介绍ios，工程搭建完成以后，我们先来认识一下目录结构

这里主要介绍着两个文件，我们所有的代码都写在lib文件中，创建文件以dart结束，标志为flutter文件；其次下面的yaml文件是我们后期配置一些第三方库，或者资源文件的时候要用到，这里暂不做解释；

程序入口

当我们新建工程之后，会默认生成main.dart文件，main方法是全工程的入口，只有一个，为了更好的学习，我们删除默认生成的代码，因为实在太乱，删除以后的代码是这样的：

statelessWidget和statefulWidget

• StatelessWidget和StatefulWidget两个抽象类，用于自定义控件
• StatelessWidget是‘‘无状态控件’’,不可变状态控件,通过构建其他控件来描述用户界面的一部分
• StatefulWidget是‘‘有状态控件’’，定义一个具有可变状态的控件，我们可以称其为“有状态控件”
• 与用户进行交互，比如通过键盘输入内容、通过滑动屏幕移动滑块、点击时改变状态，数据更新状态等一些列用户的交互。这时我们应该选择使用StatefulWidget创建一个有状态控件。
• 如果仅依赖于对象本身的配置信息，仅仅是用于展示给定的信息。那我们应该选择使用StatelessWidget创建一个无状态控件

MaterialApp和Scaffold

• MaterialApp它是Flutter应用布局的根元素
• 可以将 Scaffold 理解为一个布局的容器，在这个容器中绘制我们的用户界面

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”横幅，表示应用程序处于选中模式
}) 

导航栏AppBar

上面我们已经介绍了根元素和布局容器，接下来，我们开始第一个控件的学习——AppBar导航栏，直接上代码

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('这是我的FlutterAPP'),
        ),
      ),
    );
  }
}

运行效果如图

AppBar属性介绍

title: Text('这是我的FlutterAPP'),	用于给导航栏设置要显示的文字
centerTitle: true,	默认不加该属性的话，居左，设置为true，设置居中
backgroundColor: Colors.red,	设置导航栏颜色
除了上面设置颜色的方式，也可以用16进制 backgroundColor: const Color(0xffffff),	0x表示16进制
textTheme: TextTheme(      title: TextStyle(      fontSize: 18,      color: Colors.yellow,      fontStyle: FontStyle.italic ) )	设置字体风格， 颜色， 字号， 斜体italic

 

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('这是我的FlutterAPP'),
          centerTitle: true,
          backgroundColor: Colors.red,
          textTheme: TextTheme(
            title: TextStyle(
              fontSize: 18,
              color: Colors.yellow,
              fontStyle: FontStyle.italic
            )
          ),

        ),
      ),
    );
  }
}

运行效果