小夏的博客 - flutter
type: channel
link: https://www.qfxaile.top/index.php/tag/flutter/
items: Flutter学习笔记

Flutter学习笔记
type: item
date: 2025-12-29T20:11:00+08:00
description: 一.基础组件1.MaterialApp常见属性: title theme hometitle: 用来展示窗口的标题内容(可以不设置)theme: 用来设置整个应用的主题home: 用来展示窗口的主体内容void main(List<String> args) { runApp( MaterialApp( title: "Flutter组件初体验", theme: ThemeData(scaffoldBackgroundColor: Colors.greenAccent), home: Scaffold(), ), ); }2.Scaffold用于构建MaterialDesign风格页面的核心布局组件，提供标准、灵活配置的页面骨架属性主要作用说明appBar页面顶部的应用栏，通常用于显示标题、导航按钮和操作菜单body页面的主要内容区域，可以放置任何其他组件，是页面的核心bottomNavigationBar底部导航栏，方便用户在不同核心功能页面间切换backgroungColor设置整个Scaffold的背景颜色floatingActionButton悬浮操作按钮，常用于触发页面的主要动作...其他void main(List<String> args) { runApp( MaterialApp( title: "Flutter组件初体验", theme: ThemeData(scaffoldBackgroundColor: Colors.greenAccent), home: Scaffold( appBar: AppBar( title: Text("头部区域"), centerTitle: true ), body: Container( child: Center( child: Text("中间区域") ) ), bottomNavigationBar: Container( height: 80, child: Center( child: Text("底部区域") ), ), ), ), ); }二.自定义组件定义：根据自己特定的需求创建自己的widget分类：Flutter分为无状态组件和有状态组件特性StatelessWidget(无状态)StatefulWidget(有状态)核心特征一旦创建，内部状态不可变持有可在其生命周期内改变的状态使用场景静态内容展示，外观仅由配置参数决定交互式组件，如计数器、可切换开关、表单输入框生命周期相对简单，主要是构建（build)更为复杂，包含状态创建、更新和销毁代码结构单个类两个关联的类：Widget 本身和单独的 State类1.无状态组件定义：创建一个新的类，继承StatelessWidget类并实现build方法要点：build返回一个widget场景：纯展示型组件，没有用户交互操作需求：把之前案例的骨架换成无状态组件void main(List<String> args) { runApp(MainPage()); } // 无状态组件 自定义组件中的一种 class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } }2.有状态组件定义：有状态组件是构建动态交互界面的核心，能够管理变化的内部状态，当状态改变时，组件会更新显示内容实现1：创建两个类，第一个类继承Statefulwidget类，主要接收和定义最终参数，核心作用是创建State对象实现2：第二个类继承State<第一个类名>，负责管理所有可变的数据和业务逻辑，并实现build构建方法要点：build方法需要返回一个Widget需求：将之前骨架组件换成有状态组件// 有状态组件 第一个类 对外 class MainPage extends StatefulWidget { @override State<StatefulWidget> createState() { // return 第二个类 return _MainPageState(); } } // 有状态组件 第二个类 内部类 负责管理数据 处理业务逻辑 并且渲染视图 class _MainPageState extends State<MainPage> { @override Widget build(Object context) { return Container(); } }三.生命周期1.无状态组件生命周期无状态组件-唯一阶段build方法当组件被创建或父组件状态变化导致其需要重新构建时，build方法会被调用class MainPage extends Stateless…