Flutter中的MaterialApp和Scaffold以及抽离单独组件的方式

1,035 阅读1分钟

flutter项目的基本目录

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

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

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) { 
    // TODO: implement build 
        return Center( 
            child: Text( 
            "我是一个文本内容", 
            textDirection: TextDirection.ltr, //设置text文本方向
            ), 
        ); 
    } 
}

MaterialApp

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

        home(主页) 
        title(标题) 
        color(颜色) 
        theme(主题) 
        routes(路由)

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

Scaffold 有下面几个主要属性:

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

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

drawer - 抽屉菜单控件

抽离出单独组件

import 'package:flutter/material.dart'; 

void main(){ 
    runApp(MyApp()); 
} 
class MyApp extends StatelessWidget{ 
@override 
    Widget build(BuildContext context) { 
    // TODO: implement build 
        return MaterialApp( 
            title:"我是一个标题", 
            home:Scaffold( 
                appBar: AppBar( 
                    title:Text('IT 营'), 
                    elevation: 30.0, //设置标题阴影 不需要的话值设置成 0.0 ),
                ),
                body: MyHome(), 
            ),
            theme: ThemeData( //设置主题颜色 
                primarySwatch: Colors.yellow,
            ), 
        ); 
    } 
} 

class MyHome 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.black38 
                    // color: Color.fromRGBO(255, 222, 222, 0.5) 
                ),
            ), 
        );
    } 
}