Flutter 04 - 目录结构介绍、Flutter 入口、Center、Text、MaterialApp、Scaffold等组件的使用

一、目录结构介绍

01.png

需要注意以下几个文件夹，其他的暂时不用理会

文件夹	作用
android	android 平台相关代码
ios	iOS 平台相关代码
lib	Flutter 相关代码，我们主要编写的代码就在这个文件夹
test	用于存放测试代码
pubspec.yaml	配置文件，一般存放一些第三方库的依赖

二、Flutter 入口文件、入口方法

每一个 flutter 项目的 lib 目录里面都有一个 main.dart 这个文件就是 flutter 的入口文件

// main.dart
void main(){ 
    runApp(MyApp());
}

// 也可以简写
void main() => runApp(MyApp());

• 其中的 main 方法是 dart 的入口方法
• runApp 方法是 flutter 的入口方法。
• MyApp 是自定义的一个组件

三、第一个 Demo项目，Center 组件的使用

import 'package:flutter/material.dart'; // 快捷键：f(flutter) + i(import) + m(material) = fim

/*
void main() {
  // flutter 的入口方法
  runApp(
      MyApp()
    );
}
*/

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    return new Center( // new 可以省略
      child: new Text( 
        "我是一个文本内容",
        textDirection: TextDirection.ltr //ltr = left to right 文本从左往右对齐
      ) 
    );
  }
}

Center-Text.png

四、把内容单独抽离成一个组件

在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget \ StatefulWidget

组件	描述
StatelessWidget	无状态组件，状态不可变的 widget
StatefulWidget	有状态组件，持有的状态可能在 widget 生命周期改变

import 'package:flutter/material.dart'; 

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center_TextWidget();
  }
}

class CenterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        "我是一个文本内容",
        textDirection: TextDirection.ltr //ltr = left to right 文本从左往右对齐
      ) 
    );
  }
}

五、给 Text 组件增加一些样式

class Center_TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text( 
        "我是 Dart 一个文本内容",
        textDirection: TextDirection.ltr, // ltr = left to right 文本从左往右对齐
        style: TextStyle( // 给 Text 组件增加一些装饰
          fontSize: 30.0, // Dart 数字都是 Number 类型，必须要小数点
          fontWeight: FontWeight.bold,
          // color: Colors.red
          color: Color.fromRGBO(0, 255, 0, 0.5)
        ),
    ) 
    );
  }
}

Center-Text-TextStyle.png

六、使用 MaterialApp 和 Scaffold 两个组件装饰 App

MaterialApp

MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的一些 Widget。

一般作为顶层 widget 使用。

常用的属性:

属性	描述
home	主页
Title	标题
color	颜色
theme	主题
routes	路由
…	…

Scaffold

Scaffold 是 Material Design 布局结构的基本实现。

此类提供了用于显示 drawer、 snackbar 和底部 sheet 的 API。

有下面几个主要属性:

属性	描述
appBar	显示在界面顶部的一个 AppBar
body	当前界面所显示的主要内容 Widget
drawer	抽屉菜单控件

// main.dart
import 'package:flutter/material.dart'; 

void main() => runApp(MyApp());

// MyApp 组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "我是一个标题", // 标题
      home: Scaffold(      // 主页
        appBar: AppBar(
          title: Text("Flutter Demo"),
          elevation: 30.0, // 设置标题阴影 不需要的话值设置成0.0
        ),
        body: HomeWidget(),
      ),
      theme: ThemeData( // 设置主题颜色
        primarySwatch: Colors.yellow
      ),
    );
  }
}

// Home 组件
class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CenterWidget();    
  }
}

// 自定义 Center 组件
class CenterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 返回一个 Center 组件
    return Center(
      child: TextWidget()
    );
  }
}

// 自定义 Text 组件
class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text( 
        "我是 Dart 一个文本内容",
        textDirection: TextDirection.ltr, // ltr = left to right 文本从左往右对齐
        style: TextStyle( // 给 Text 组件增加一些装饰
          fontSize: 30.0, // Dart 数字都是 Number 类型，必须要小数点
          fontWeight: FontWeight.bold,
          // color: Colors.red
          color: Color.fromRGBO(0, 255, 0, 0.5)
        ),
    );
  }
}

Nav-Center-Text.png