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

文章目录

概述
- 一、应用程序（Application）：
- - 1、创建应用对象
  - 2、定义应用主页
- 二、Widgets：
- - [1. 基础的内置Widgets应用](#1. 基础的内置Widgets应用)
  - - [1.1 Text Widget](#1.1 Text Widget)
    - [1.2 RaisedButton Widget](#1.2 RaisedButton Widget)
    - [1.3 Image Widget](#1.3 Image Widget)
    - [1.4 Icon Widget](#1.4 Icon Widget)
  - [2. 自定义Widgets的创建与应用](#2. 自定义Widgets的创建与应用)
  - - [2.1 创建按钮组件](#2.1 创建按钮组件)
    - [2.2 创建卡片组件](#2.2 创建卡片组件)
    - [2.3 创建自定义列表项](#2.3 创建自定义列表项)
  - [3. 布局Widgets的应用](#3. 布局Widgets的应用)
  - - [3.1 Row Widget](#3.1 Row Widget)
    - [3.2 Column Widget](#3.2 Column Widget)
    - [3.3 Expanded Widget](#3.3 Expanded Widget)
    - [3.4 SizedBox Widget](#3.4 SizedBox Widget)
    - [3.5 应用](#3.5 应用)
  - [4. 手势识别与动画效果](#4. 手势识别与动画效果)
  - [4.2 动画效果](#4.2 动画效果)
  - [5. 其他高级Widgets的应用](#5. 其他高级Widgets的应用)
  - - [5.1 SingleChildScrollView](#5.1 SingleChildScrollView)
    - [5.2 TabBar & TabBarView](#5.2 TabBar & TabBarView)

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

概述

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

一、应用程序（Application）：

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

应用程序的构建

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

1、创建应用对象

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

dart 复制代码

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

2、定义应用主页

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

dart 复制代码

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

二、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来快速构建应用的用户界面。

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

dart 复制代码

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

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

dart 复制代码

RaisedButton(
  onPressed: () {
    // 按钮点击事件处理
  },
  child: Text('Click me'),
  color: Colors.blue,
)

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

dart 复制代码

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

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

dart 复制代码

Icon(
  Icons.star,
  color: Colors.yellow,
  size: 24.0,
)

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

2.1 创建按钮组件

dart 复制代码

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

2.2 创建卡片组件

dart 复制代码

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

dart 复制代码

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

2.3 创建自定义列表项

dart 复制代码

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

dart 复制代码

ListView.builder(
  itemCount: yourDataList.length,
  itemBuilder: (context, index) {
    return MyListItem(
      title: yourDataList[index].title,
      subtitle: yourDataList[index].subtitle,
      icon: yourDataList[index].icon,
    );
  },
)

3. 布局Widgets的应用

水平排列子组件。

dart 复制代码

Row(
  children: <Widget>[
    Icon(Icons.account_circle),
    Text('Username'),
  ],
)

垂直排列子组件。

dart 复制代码

Column(
  children: <Widget>[
    Text('Title'),
    Text('Subtitle'),
  ],
)

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

dart 复制代码

Row(
  children: <Widget>[
    Expanded(
      child: Text('Left'),
    ),
    Expanded(
      child: Text('Right'),
    ),
  ],
)

设置固定大小的空白框。

dart 复制代码

SizedBox(
  width: 100.0,
  height: 100.0,
  child: const Card(child: Text('Hello World!')),
)

3.5 应用

dart 复制代码

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('底部区域')),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

4. 手势识别与动画效果

4.1 GestureDetector

捕获用户手势操作。

dart 复制代码

GestureDetector(
  onTap: () {
    // 处理点击事件
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text('Tap me'),
    ),
  ),
);

4.2 动画效果

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

dart 复制代码

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

5. 其他高级Widgets的应用

5.1 SingleChildScrollView

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

dart 复制代码

SingleChildScrollView(
  child: Column(
    children: <Widget>[
      // 大量的子组件
    ],
  ),
)

5.2 TabBar & TabBarView

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

dart 复制代码

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),
  ],
)

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

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

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

文章目录

概述

一、应用程序（Application）：

1、创建应用对象

2、定义应用主页

二、Widgets：

1. 基础的内置Widgets应用

1.1 Text Widget

1.2 RaisedButton Widget

1.3 Image Widget

1.4 Icon Widget

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

2.1 创建按钮组件

2.2 创建卡片组件

2.3 创建自定义列表项

3. 布局Widgets的应用

3.1 Row Widget

3.2 Column Widget

3.3 Expanded Widget

3.4 SizedBox Widget

3.5 应用

4. 手势识别与动画效果

4.2 动画效果

5. 其他高级Widgets的应用

5.1 SingleChildScrollView

5.2 TabBar & TabBarView