Flutter目录结构介绍、MaterialApp组件、Scaffold组件

发布于 16 天前  0 次阅读


目录结构

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

Flutter入口文件和方法

Flutter项目下lib目录中的 main.dart 即为入口文件

void main(){
  runApp(MyApp());
}
void main() => runApp(MyApp()); //或者这样写

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

在flutter中自定义组件其实就是一个类, 想要定义组件必须要继承StatefulWidget或StatelessWidget
StatelessWidget 是无状态组件,状态不可变的 widget —— 它没有要管理的内部状态
StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变。使用setState方法管理StatefulWidget的状态的改变

MaterialApp组件

用于创建主题,它封装了应用程序实现 Material Design 所需要的一些 Widget。一般作为顶层 widget 使用。
Flutter应用中,一个完整的项目是从MaterialApp这个组件开始的,即MaterialApp作为入口存在的

常用属性:

字段类型描述
homeWidget主页(app运行时打开的首页面)
titleString标题(应用的名字)
colorColor颜色(程序切换中应用图标背景的颜色,当应用图标背景为透明时)
themeThemeData主题
routesMap<String, WidgetBuilder>路由

Scaffold组件

Scaffold 是 Material Design 布局结构的基本实现。此类提供了用于显示 drawer、snackbar 和底部 sheet 的 API。
Scaffold实现了基本的Material Design布局。只要是在Material Design中定义过的单个界面实现的布局元素,都可以使用Scaffold来绘制

常用属性:

属性名类型说明
appBarAppBar显示在界面顶部的一个AppBar
bodyWidget当前界面所显示的主要内容
drawerWidget侧边栏组件

Demo

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: HomeContent(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
    );
  }
}

//
class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'hello flutter',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,
          color: Colors.pink,
        ),
      ),
    );
  }
}

平平无奇的大学在读本科生