您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-03(Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件)

2020-04-29【Flutter】1307人已围观

简介> Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件 ## 一、Flutter 目录结构文件夹 | 作用 ---|--- android | android 平台相关代码 ios | ios 平台相关代码 lib | flutter 相关代码，我们主要编写的代码就在这个文件夹 test | 用于存放测试代码 pubspec.yaml | 配置文件，一般存放一些第三方库的依赖。

> Flutter目录结构介绍、入口、自定义Widget、Center组件、Text组件、MaterialApp组件、Scaffold组件

## 一、Flutter 目录结构

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

## 二、 Flutter  入口文件、入口方法

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

```
void main(){
runApp(MyApp());
}
也可以简写
void main()=>runApp(MyApp());
```

其中的 `main` 方法是 `dart` 的入口方法。`runApp` 方法是 `flutter` 的入口方法。
`MyApp` 是自定义的一个组件

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

```
import 'package:flutter/material.dart';
void main(){
    runApp(Center(
        child: Text(
            "我是一个文本内容",
            textDirection: TextDirection.ltr,
        ),
    ));
}
```

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

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

- `StatelessWidget` 是无状态组件，状态不可变的 `widget`
- `StatefulWidget` 是有状态组件，持有的状态可能在 `widget` 生命周期改变

## 五、给 Text  组件增加一些装饰

```
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)),
      ),
    );
  }
}

```

## 六、 使用MaterialApp 和 Scaffold 两个组件装饰 App

### 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`。
- `resizeToAvoidBottomPadding` 控制界面内容 body
是否重新布局来避免底部被覆盖了，比如当键盘显示的时候，重新布局避免被键盘盖住内容。默认值为 true。
- `drawer` - 抽屉菜单控件。
- `bottomNavigationBar` 显示在底部的导航栏按钮栏
- `backgroundColor` 背景颜色
-

```
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)
            ),
      ),
    );
    ;
  }
}

```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-02(demo)

下一篇：flutter-04(Flutter Container 组件、Text 组件详解)