Flutter框架性泛学习系列之二、Flutter应用层（Application Layer）上-常用Widgets与简单动画

任何知识体系，都需要系统的去学习，有一个大概的框架，学习才能如遇得水。知道自己学习的是什么，属于知识体系中的哪一环。
学习就应该首先有一个体系，然后不求甚解的将体系过一遍，最后再在体系中，填充各部分知识。

概述

在Flutter框架的整体层次结构中，应用层（Application Layer）是最接近开发者的一层，负责管理应用程序的整体逻辑和用户界面。以下是应用层的一些关键组成部分和功能：

一、应用程序（Application）：

应用程序是Flutter应用的顶层组件，它通常代表着整个应用的入口点。应用程序负责启动应用、管理应用的生命周期，并协调不同组件之间的交互。

应用程序的构建

在Flutter中，应用程序是整个应用的顶层组件，它代表着应用的入口点。在构建Flutter应用程序时，我们通常需要做以下几个步骤：

1、创建应用对象

使用MaterialApp或CupertinoApp等顶级组件创建应用对象，并指定应用的一些基本属性，如标题、主题等。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2、定义应用主页

创建应用的主页，通常是一个StatefulWidget，负责展示应用的内容和处理用户交互。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to my Flutter app!'),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

二、Widgets：

Widgets是Flutter应用层构建用户界面的基本单元。Flutter提供了丰富的内置Widgets，包括文本、按钮、图像等，开发者还可以通过组合现有的Widgets来创建自定义的UI组件。Widgets可以是有状态的（StatefulWidget）或无状态的（StatelessWidget），它们定义了UI的外观和行为。
在Flutter中，Widgets是构建用户界面的基本单元，它们不仅定义了UI的外观和行为，还提供了丰富的功能和灵活的运用方式。本文将深入探讨Flutter Widgets的使用，从基础的内置Widgets到自定义Widgets的创建，帮助开发者更好地掌握Flutter框架的核心技术。

1. 基础的内置Widgets应用

Flutter提供了大量内置的Widgets，涵盖了常见的UI组件，开发者可以直接使用这些Widgets来快速构建应用的用户界面。

1.1 Text Widget

Text Widget用于显示文本内容，可以设置字体样式、颜色等属性。

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

1
2
3
4
5
6
7
8
9

1.2 RaisedButton Widget

创建凸起的按钮，可以设置按钮文本、颜色、点击事件等属性。

RaisedButton(
  onPressed: () {
    // 按钮点击事件处理
  },
  child: Text('Click me'),
  color: Colors.blue,
)
1
2
3
4
5
6
7

1.3 Image Widget

显示图像，可以从本地文件或网络加载图像。

Image.network('https://example.com/image.jpg')
1

1.4 Icon Widget

显示图标，可以使用Material Design或Cupertino风格的图标。

Icon(
  Icons.star,
  color: Colors.yellow,
  size: 24.0,
)
1
2
3
4
5

2. 自定义Widgets的创建与应用

2.1 创建按钮组件

class MyButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;//一个回调

  MyButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

2.2 创建卡片组件

class MyCard extends StatelessWidget {
  final Widget child;
  final Color color;

  MyCard({required this.child, this.color = Colors.white});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 5,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: child,
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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('My App'),
        ),
        body: Center(
          child: MyCard(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  'Hello, World!',
                  style: TextStyle(fontSize: 24),
                ),
                SizedBox(height: 10),
                Text(
                  'This is a custom card.',
                  style: TextStyle(fontSize: 16),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

2.3 创建自定义列表项

class MyListItem extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;

  MyListItem({required this.title, required this.subtitle, required this.icon});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: Icon(icon),
      title: Text(title),
      subtitle: Text(subtitle),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

ListView.builder(
  itemCount: yourDataList.length,
  itemBuilder: (context, index) {
    return MyListItem(
      title: yourDataList[index].title,
      subtitle: yourDataList[index].subtitle,
      icon: yourDataList[index].icon,
    );
  },
)
1
2
3
4
5
6
7
8
9
10

3. 布局Widgets的应用

3.1 Row Widget

水平排列子组件。

Row(
  children: <Widget>[
    Icon(Icons.account_circle),
    Text('Username'),
  ],
)
1
2
3
4
5
6

3.2 Column Widget

垂直排列子组件。

Column(
  children: <Widget>[
    Text('Title'),
    Text('Subtitle'),
  ],
)
1
2
3
4
5
6

3.3 Expanded Widget

在Row、Column等布局中扩展子组件。

Row(
  children: <Widget>[
    Expanded(
      child: Text('Left'),
    ),
    Expanded(
      child: Text('Right'),
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10

3.4 SizedBox Widget

设置固定大小的空白框。

SizedBox(
  width: 100.0,
  height: 100.0,
  child: const Card(child: Text('Hello World!')),
)
1
2
3
4
5

3.5 应用

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('布局Widgets示例'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  color: Colors.red,
                  child: Center(child: Text('顶部区域')),
                ),
              ),
              Expanded(
                flex: 3,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.blue,
                        child: Center(child: Text('左侧区域')),
                      ),
                    ),
                    SizedBox(width: 10),
                    Expanded(
                      child: Container(
                        color: Colors.green,
                        child: Center(child: Text('右侧区域')),
                      ),
                    ),
                  ],
                ),
              ),
              Expanded(
                flex: 2,
                child: Container(
                  color: Colors.yellow,
                  child: Center(child: 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

在这个示例中，我们创建了一个简单的布局，包含了顶部、左侧、右侧和底部四个区域。Column用于垂直排列这些区域，Row用于水平排列左侧和右侧区域。Expanded用于指定每个区域的比例，使它们可以根据屏幕尺寸进行动态调整。通过这种方式，我们可以构建出灵活且自适应的用户界面。

4. 手势识别与动画效果

4.1 GestureDetector
捕获用户手势操作。

GestureDetector(
  onTap: () {
    // 处理点击事件
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text('Tap me'),
    ),
  ),
);
1
2
3
4
5
6
7
8
9
10
11
12
13

4.2 动画效果

使用Flutter内置的动画效果，如Opacity、Rotation、Scale等。

class MyAnimatedWidget extends StatefulWidget {
  @override
  _MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
  bool _isVisible = true;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        AnimatedOpacity(
          opacity: _isVisible ? 1.0 : 0.0,
          duration: Duration(milliseconds: 500),
          child: Text('Hello'),
        ),
        RaisedButton(
          onPressed: () {
            setState(() {
              _isVisible = !_isVisible;
            });
          },
          child: Text('Toggle Visibility'),
        ),
      ],
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

5. 其他高级Widgets的应用

5.1 SingleChildScrollView

滚动视图，当子组件超出屏幕时可以滚动查看。

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      // 大量的子组件
    ],
  ),
)
1
2
3
4
5
6
7

5.2 TabBar & TabBarView

用于创建带有选项卡的界面。

TabBar(
  tabs: <Widget>[
    Tab(icon: Icon(Icons.directions_car)),
    Tab(icon: Icon(Icons.directions_transit)),
    Tab(icon: Icon(Icons.directions_bike)),
  ],
)

TabBarView(
  children: <Widget>[
    Icon(Icons.directions_car),
    Icon(Icons.directions_transit),
    Icon(Icons.directions_bike),
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

通过以上丰富多样的例子，我们深入了解了Flutter Widgets的全面应用。从基础的内置Widgets到高级的布局和手势识别，再到动画效果和其他高级Widgets的应用，Flutter提供了丰富多样的组件供开发者使用，帮助我们构建出各种复杂、美观且高效的用户界面。

Flutter提供了Flutter Inspector工具，可以帮助开发者调试和优化应用的界面布局。开发者可以使用Flutter Inspector查看界面的层次结构和属性，以及调整布局和样式。