Flutter学习

发布日期：2026/08/10标签:# Flutter# 编程

E=mc2E=mc^2

Flutter开始

  • 启动Flutter应用使用runApp方法
  • runApp方法中需要传入一个Widget
  • Widget是组成Flutter的重要一部分，万物皆Widget
  • Material风格是Flutter内置的一套独有的设计风格，里面有很多拆箱可用的Widget

基础组件-MaterialApp

特性：整个应用被MaterialApp包裹，方便我们对整个应用的属性进行整体设计

常见属性：

  • title：用来展示窗口的标题内容
  • theme：用来设置整个应用的主题
  • home：用来展示窗口的主体内容
dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter组件初体验",
    theme: ThemeData(scaffoldBackgroundColor: Colors.blue),
    home: Scaffold()
  ));
}

基础组件-Scaffold组件

  • MaterialApp 包裹整个应用程序形成统一的Material Design风格
  • Scaffold组件可以快速搭建页面骨架，如appBar、body、bottomNavigator等
  • Container用来作为容器，设置高度（height），child用来存放子组件
  • Text是用来显示文本的组件
dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter组件初体验",
    home: Scaffold(
    
      appBar: AppBar(
        title: Text("头部区域"),
        centerTitle: true,
      ),
      
      body: Container(
        child: Center(
          child: Text("中部组件"),
        ),
      ),
      
      bottomNavigationBar: Container(
        height: 80,
        child: Center(
          child: Text("底部区域"),
        ),
      ),
      
    )
  ));
}

无状态组件 - StatelessWidget

  • 定义：创建一个新的类，继承StatelessWidget类，并实现build方法
  • 要点：build返回一个Widget
  • 场景：纯展示型组件，没有用户交互操作
dart
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MainPage());
}

// 无状态组件 -自定义组件中的一种
class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: "Flutter组件初体验",
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
          centerTitle: true,
        ),
        body: Container(
          child: Center(
            child: Text("中部组件"),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(
            child: Text("底部区域"),
          ),
        ),
      )
    );
  }
  
}

无状态组件的生命周期

无状态组件有唯一阶段，就是其build方法

当组件被创建或父组件发生变化导致其需要重新构建时，build方法会被调用

有状态组件 - StatefulWidget

  • 定义：有状态组件是构建动态交互界面的核心，能够挂历变化的内部状态，当状态改变时，组件会更新显示内容
  • 实现1：创建两个类，第一个类继承StatefulWidget类， 主要接收和定义最终参数， 核心作用是创建State对象
  • 实现2：第二个类继承State<第一个类名> ，负责管理所有可变的数据各业务逻辑，并实现build构建方法
  • 要点：build方法需要返回一个Widget

第一个类：

dart
// 有状态组件 第一个类：对外
class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    // return第二个类的对象
    return _MainPageState();
  }
}

第二个类：

dart
class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter组件初体验-有状态组件",
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
          centerTitle: true,
        ),
        body: Container(
          child: Center(
            child: Text("中部组件"),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Center(
            child: Text("底部区域"),
          ),
        ),
      )
    );
  }
}

有状态组件的生命周期

生命周期阶段函数名调用时机与核心任务
创建阶段createState()Widget初始化调用，创建 State 对象
initState()State 对象插入 Widget 树立刻执行，仅执行一次
didChangeDependencies()initState 后立刻执行，当所依赖的 InheritedWidget 更新时调用，可能多次
构建与更新阶段build()构建 UI 方法，初始化或更新后多次调用
didUpdateWidget()父组件传入新配置时调用，用于比较新旧配置
销毁阶段deactivate()当 State 对象从树中暂时移除时调用
dispose()当 State 对象被永久移除时调用，释放资源，仅执行一次

点击事件

GestureDetector组件

dart
GestureDetector(
  // 点击事件
  onTap: () {
    print("点击了该区域");
  },
  onDoubleTap: () {
     print("双击了该区域");
  },
  child: Text("中部区域"),
),

Flutter提供的多种点击交互组件

组件类别核心组件主要特点/使用场景
专用按钮组件ElevatedButton、TextButton、OutlineButton、FloatingActionButton内置点击动画和样式，通过 onPressed 参数处理点击逻辑
视觉反馈组件InkWell提供点击事件 (onTap)，有 Material Design 风格的水纹扩散效果
其他交互组件IconButton、Switch、Checkbox具有特定功能的交互式控件、点击事件 (onPressed)

状态更新

setState

数据需要更新UI视图，需要执行setState方法，setState方法会造成build函数的重新执行