flutter 基础组件学习

小雨凉如水2026-03-12 13:57

文章目录

flutter 项目结构

当我们创建项目的时候，flutter自动帮我们创建一些东西。

我们重点只需要关注两个

第一个是lib，项目的主要源代码目录

第二个是pubspec.yml ,也就是项目依赖和配置文件(类比python的requestments.txt go 语言的go.mod)

其他的，如果上过班的话，应该也清楚是什么，这里就简单说一下

build 是存放构建产物的目录，比如exe，就是编译过后可运行的文件

test 就是存放代码测试的目录，一般是公司要求编写单测

.gitignore 学过git 的应该都知道吧，要求git 在add 的时候，忽略的文件或目录

runapp 和 widget

runapp 函数 是 flutter 内部提供的一个函数，我个人理解是程序的启动入口

flutter 中 万物皆widget

什么都是widget

基础组件--material App

material 是 官方出的UI 库，整个 app 都被 material app 包裹

本节我们学到了三个常用属性

title：用来设置 网页的名称

theme: ThemeData(scaffoldBackgroundColor: Colors.pinkAccent),

用来设置 主题的颜色，需要注意，如果home 没有设置的话，这个颜色是不会显示出来的

home 就是用来展示窗口的主体内容的。

dart 复制代码 
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "Flutter 组建初体验",
    theme: ThemeData(scaffoldBackgroundColor: Colors.pinkAccent),
    home: Scaffold(
      body: const Center(
        child: Text("Hello World!"),
      ),
    ),
  ));
}

基础组件- scaffold

scaffold 是 页面骨架，常用的就是三个widget

分别是 appBar，body，bottomNavigationBar

appBar 就是页面的头部区域，这部分我们可以AppBar 来进行设置

body 就是 身体，也就是页面的中部区域，我们这里使用containter 容器，后面会进行讲解

bottimNavigationBar 就是 页面的底部

本节还讲了

Centor ，用于让组件处于居中的位置

Text，文本组件

height,设置 容器高度

需要注意，bottomNavigationBar 需要设置一下高度，不然会被body 给挤掉。

还有就是 ，使用win 的话，会发现 头部区域的文字是右对齐 的，这个应该是win和mac平台不同造成的。

dart 复制代码 
import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MaterialApp(
    title: "flutter 初体验",
    // theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
    home: Scaffold(
      appBar: AppBar(
        title: Text("头部区域"),
      ),
      body: Center(
        child: Text("中部区域"),
      ),
      bottomNavigationBar: SizedBox(
        height: 80,
        child: Center(
          child: Text("底部区域"),
        ),
      ),
    ),
  ));
}

自定义组件

自定义组件分为有状态组件和有状态组件，区别如下

无状态组件

无状态组件 简单来说就是不能动的，纯展示型组件，没有用户交互操作

自己实现一个无状态组件，也是挺简单的

只需要 创建一个新的类，继承Statelesswidget 类 并实现build 方法

dart 复制代码 
import 'package:flutter/material.dart';

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

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 初体验",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: Text("中部区域"),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
}

有状态组件

有状态组件 跟无状态组件，我觉得最大的区别在于，有一个类负责管理所有可变的数据和业务逻辑，其他跟无状态组件，感觉区别不是很大。

dart 复制代码 
import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }

}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 有状态组件",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: Text("中部区域"),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
  }

快捷键快速创建 无状态组件 和 有状态组件

idea 的快捷键，跟vscode 里面的快捷键 ，有一点不同，

无状态组件快捷键：stless

有状态组件快捷键：stful

下面这个是vscode 的快捷键

生命周期-无状态组件

无状态组件的唯一阶段就是 build 方法

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

生命周期- 有状态组件

可以跑一下代码试一下，

dart 复制代码 
import 'package:flutter/material.dart';

void main() {
  runApp(TestWidget());


}

class TestWidget extends StatefulWidget {
  const TestWidget({super.key});

  @override
  State<TestWidget> createState() {
    print("create state 阶段");
    return _TestWidgetState();
  }

}

class _TestWidgetState extends State<TestWidget> {
  @override
  void initState() {
    print("init state 阶段");
    // TODO: implement initState
    super.initState();
  }
  @override
  void didChangeDependencies() {
    print("didChangeDependencies 阶段");
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    print("deactivate 阶段");
    super.deactivate();
  }

  @override
  void dispose() {
    // TODO: implement dispose
    print("dispose 阶段");
    super.dispose();
  }


  @override
  void didUpdateWidget(covariant TestWidget oldWidget) {
    // TODO: implement didUpdateWidget
    print("didUpdateWidget 阶段");
    super.didUpdateWidget(oldWidget);
  }

  @override
  Widget build(BuildContext context) {
    print("build 阶段");
    return const Placeholder();
  }
}

点击事件-GestureDetector

GestureDetector 是手势检测组件

可以使用该组件 的 onTap 方法 来实现单击事件的触发，onDoubleTap 就是双击事件，可以试一下下面的代码

dart 复制代码 
import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }

}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 有状态组件",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: GestureDetector(
              // onTap: (){
              //   print("点击了该区域");
              // },
              onDoubleTap: (){
                print("双击了该区域");
              },
              child: Text("中部区域"),
            ),
          ),
        ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
}

事件-组件点击事件

flutter 还提供其他的组件，来进行点击交互

dart 复制代码 
import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }

}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "flutter 有状态组件",
      theme: ThemeData(scaffoldBackgroundColor: Colors.deepOrange),
      home: Scaffold(
        appBar: AppBar(
          title: Text("头部区域"),
        ),
        body: Container(
          child: Center(
            child: TextButton(onPressed: (){
              print("点击了该区域");
            }, child: Text("按钮"))
            ),
          ),
        bottomNavigationBar: Container(
          height: 80,
          child: Container(
            child: Center(
              child: Text("底部区域"),
            ),
          ),
        ),
      ),
    );
  }
}

状态更新-setState

当数据变化，需要更新ui视图的时候，需要执行setState 方法，setState 造成build 方法的重新执行。

相关推荐
Lanren的编程日记36 分钟前
Flutter 鸿蒙应用数据版本管理实战：版本记录+版本回退+版本对比，实现全链路数据版本控制
flutter·华为·harmonyos
red_redemption2 小时前
自由学习记录（175）
学习
nashane3 小时前
HarmonyOS 6学习：画中画（PiP）状态同步与场景化实战指南
学习·pip·harmonyos·harmonyos 5
_李小白4 小时前
【android opencv学习笔记】Day 8: remap（像素位置重映射）
android·opencv·学习
勤劳的进取家4 小时前
数据链路层基础
网络·学习·算法
d111111111d4 小时前
直流电机位置式 PID 控制 和 舵机的区别
笔记·stm32·单片机·嵌入式硬件·学习
y = xⁿ5 小时前
Redis八股学习日记：布隆过滤器
数据库·redis·学习
d111111111d7 小时前
了解Modbus
网络·笔记·stm32·单片机·嵌入式硬件·学习
charlie1145141917 小时前
通用GUI编程技术——图形渲染实战（三十八）——顶点缓冲与输入布局：GPU的第一个三角形
开发语言·c++·学习·图形渲染·win32
MonkeyKing7 小时前
Flutter列表性能极致优化：从卡顿到丝滑
flutter·dart
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档032026年4月AI大事件深度解读：大模型竞争进入“深水区“04近期有什么ai的新消息，新动态？ 2026.4月05【AI】2026 年具身智能模型和世界模型总结062026年AI编程工具终极横评：Cursor vs Claude Code vs Copilot07实测可用｜小米 MiMo 百万亿 Token 免费领，开发者速冲08在Windows 11上安装Docker的踩坑记录09裂开！ChatGPT 居然开始要手机号验证，附详细解决方法10零基础教你claude code 接入 deepseek V4