Flutter学习笔记(一)

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

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

1
2
3
4
5
void main(){
    runApp(MyApp());
}
//也可以简写
void main()=>runApp(MyApp());

二、Flutter 第一个 Demo Center 组件的使用

1
2
3
4
5
6
7
8
9
import 'package:flutter/material.dart';
void main(){
    runApp(Center(
        child: Text(
            "我是一个文本内容",
            textDirection: TextDirection.ltr,
        ),
    ));
}

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

  在 Flutter 中自定义组件其实就是一个类，这个类需要继承 StatelessWidget/StatefulWidget 前期我们都继承 StatelessWidget 。后期给大家讲 StatefulWidget 的使用。
StatelessWidget 是无状态组件，状态不可变的 widget
StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(
            "我是一个文本内容",
            textDirection: TextDirection.ltr,
            ),
        );
    }
}

四、给 Text 组件增加一些装饰

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        // TODO: implement build
        return Center(
            child: Text(
                "我是 Dart 一个文本内容",
                textDirection: TextDirection.ltr,
                style: TextStyle(
                    fontSize: 40.0,
                        fontWeight: FontWeight.bold,
                        // color: Colors.yellow
                        color: Color.fromRGBO(255, 222, 222, 0.5)

                ),
            ),
        );
    }
}