01.Flutter自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件

进击的巨人 Season 3

1.Flutter 第一个 Demo Center 组件的使用

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

前期我们都继承 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{
            child: Text{
                "我是一个文本内容"，
                textDirection: TextDirection.ltr,
            }
        },
    };
}

2.给Text组件增加一些装饰

import 'package:flutter/material.dart'; 

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

class MyApp exstands StatelessWidget{
    @override
    Wigdet bluid(BluidContext context){
        return Center{
            child: Text{
                "我是 Dart 一个文本内容",
                textDirection: TextDirection.ltr,
                style: TextStyle{
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Color.fromRGBO(255, 222, 222, 0.5)
                }
            },
        };
    }
}

3.使用MaterialApp和Scaffold两个组件装饰App

1.MaterialApp

MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一般作为顶层widget使用。

常用的属性：

1. home（主页）
2. title（标题）
3. color（颜色）
4. theme（主题）
5. routes（路由）
6. ...

2.Scaffold

Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet的API。

常用的属性：

1. appBar - 显示在界面顶部的一个 AppBar
2. body - 当前界面所显示的主要内容 Widget
3. drawer - 抽屉菜单控件
4. ...

import 'package:flutter/material.dart'; 

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

class MyApp extends s StatelessWidget{
    @override 
    Widget build(BuildContext context) {
        return MateriaApp{
            title: "我是一个标题",
            home: Scaffold{
                appBar: AppBar{
                    title: Text('appBar title'),
                    elevation: 30.0, //设置标题阴影
                },
                body: MyHome(),
            },
            theme: ThemeData{
                //设置主题颜色
                primarySwatch: Colors.yellow,
            },
        };
    }
}

class MyHome extends StatelessWidget{
    @override 
    Widget build(BuildContext context) {
        return Center{
            child: Text{
                "我是 Dart 一个文本内容",
                textDirection: TextDirection.ltr,
                style: TextStyle{
                    fontSize: 40.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.black38,
                }
            },
        };
    }
}