Flutter 04 - 目录结构介绍、Flutter 入口、C

一、目录结构介绍

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

二、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 文本从左往右对齐
      ) 
    );
  }
}

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

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

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)
        ),
    ) 
    );
  }
}

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

MaterialApp

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

一般作为顶层 widget 使用。

常用的属性:

Scaffold

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

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

有下面几个主要属性:

// 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)
        ),
    );
  }
}