Flutter开发项目入门

越陌度阡

发布于 2022-05-06 14:53:43

4360

发布于 2022-05-06 14:53:43

在Flutter里面一切皆组件，不同于CSS的样式，在Flutter里面，样式的值也基本都是组件。

以下是一个最简单的Flutter项目代码：

import 'package:flutter/material.dart';
 
void main(){
    runApp(Center(
        child: Text( 
            "你好，Flutter", 
            textDirection: TextDirection.ltr, 
        ), 
    ));
}

实际的项目中一般比较大，为了代码的可维护性，我们会把 runApp() 里的内容单独抽离成一个自定义的组件。

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

StatelessWidget 是无状态组件，状态不可变的 widget。

StatefulWidget 是有状态组件，持有的状态可能在 widget 生命周期改变。

import 'package:flutter/material.dart';
 
void main(){
    runApp(MyApp());
}
// 将runApp()里抽离成一个组件
class MyApp extends StatelessWidget{
    // 覆写
    @override
    Widget build(BuildContext context) {
        return Center(
            child: Text( 
                "你好，Flutter", 
				// 文字方向从左向右
                textDirection: TextDirection.ltr, 
            ), 
        );
    }
}

使用 MaterialApp 和 Scaffold 这两个组件，会看起来更像一个APP。

import 'package:flutter/material.dart';
 
void main(){
    runApp(MyApp());
}
 
// 将runApp()里抽离成一个组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                appBar:AppBar(title:Text('Flutter App')),
                body:HomeContent(),
            ),
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}
 
// 将Scaffold里面的body也抽离成一个组件
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Center(
            child:Text(
                '你好，Flutter',
                textDirection:TextDirection.ltr, 
                style:TextStyle(
                    // 字体大小都是double类型，必须有小数
                    fontSize: 40.0,
                    // color:Colors.yellow
                    color:Color.fromRGBO(100, 255, 100, 0.5)
                ),
            )
        );
    }
}

MaterialApp 是一个方便的 Widget，它封装了应用程序实现 Material Design 所需要的一些 Widget，一般作为顶层 widget 使用。该组件常用的属性如下：

1. home 主页

2. title 标题

3. color 颜色

4. theme 主题

5. routes 路由

Scaffold 是 Material Design 布局结构的基本实现，它提供了用于显示 drawer、 snackbar 和底部 sheet 的 API。该组件主要的属性如下：

1. appBar 显示在界面顶部的一个 AppBar。

2. body 当前界面所显示的主要内容 Widget。

3. drawer 抽屉菜单控件。

以下是在上面代码在模拟器上跑起来的效果：