当前位置: 首页 > news >正文

第3课:Flutter基础组件

第3课:Flutter基础组件

🎯 学习目标

  • 理解Flutter Widget的概念和分类
  • 掌握常用基础组件的使用方法
  • 学会基础布局组件的组合使用
  • 理解Widget的生命周期和状态管理
  • 能够创建简单的用户界面

📋 课程内容

3.1 Widget基础概念

3.1.1 什么是Widget

在Flutter中,“一切皆Widget”:

  • Widget:Flutter应用的基本构建块
  • 声明式UI:通过描述UI的最终状态来构建界面
  • 不可变性:Widget是不可变的,一旦创建就不能修改
  • 组合性:通过组合简单的Widget来创建复杂的UI
3.1.2 Widget分类
Widget
├── StatelessWidget(无状态组件)
│   ├── Text
│   ├── Icon
│   ├── Image
│   └── ...
└── StatefulWidget(有状态组件)├── TextField├── Checkbox├── Slider└── ...
3.1.3 Widget生命周期
// StatelessWidget生命周期
class MyWidget extends StatelessWidget {// 构造函数MyWidget({Key? key}) : super(key: key);// build方法(唯一必须实现的方法)Widget build(BuildContext context) {return Container();}
}// StatefulWidget生命周期
class MyStatefulWidget extends StatefulWidget {_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}class _MyStatefulWidgetState extends State<MyStatefulWidget> {void initState() {super.initState();// 初始化状态}void didChangeDependencies() {super.didChangeDependencies();// 依赖变化时调用}Widget build(BuildContext context) {return Container();}void dispose() {// 清理资源super.dispose();}
}

3.2 基础显示组件

3.2.1 Text组件
import 'package:flutter/material.dart';class TextExample extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Text组件示例')),body: Padding(padding: EdgeInsets.all(16.0),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// 基本文本Text('这是基本文本'),SizedBox(height: 20),// 带样式的文本Text('这是带样式的文本',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.blue,letterSpacing: 2.0,),),SizedBox(height: 20),// 富文本RichText(text: TextSpan(text: '这是',style: TextStyle(fontSize: 18,color: Colors.black,),children: [TextSpan(text: '富文本',style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold,color: Colors.red,),),TextSpan(text: '示例',style: TextStyle(fontSize: 18,color: Colors.black,),),],),),SizedBox(height: 20),// 文本对齐Text('这是居中对齐的文本,可以显示多行内容,''适合用于显示较长的文本信息。',textAlign: TextAlign.center,style: TextStyle(fontSize: 16),),SizedBox(height: 20),// 文本溢出处理Text('这是一段很长的文本,可能会超出容器的宽度,''需要处理文本溢出的情况。',overflow: TextOverflow.ellipsis,maxLines: 2,style: TextStyle(fontSize: 16),),SizedBox(height: 20),// 选择文本SelectableText('这是可以选择和复制的文本,长按可以选择文本内容。',style: TextStyle(fontSize: 16),),],),),);}
}
3.2.2 Icon组件
class IconExample extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Icon组件示例')),body: Padding(padding: EdgeInsets.all(16.0),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// 基本图标Icon(Icons.star),SizedBox(height: 20),// 带样式的图标Icon(Icons.favorite,color: Colors.red,size: 48,),SizedBox(height: 20),// 图标行Row(children: [Icon(Icons.home, color: Colors.blue),SizedBox(width: 16),Icon(Icons.search, color: Colors.green),SizedBox(width: 16),Icon(Icons.person, color: Colors.orange),SizedBox(width: 16),Icon(Icons.settings, color: Colors.purple),],),SizedBox(height: 20),// 图标按钮Row(children: [IconButton(icon: Icon(Icons.thumb_up),onPressed: () => print('点赞'),color: Colors.blue,),IconButton(icon: Icon(Icons.thumb_down),onPressed: () => print('点踩'),color: Colors.red,),IconButton(icon: Icon(Icons.share),onPressed: () => print('分享'),color: Colors.green,),],),SizedBox(height: 20),// 自定义图标Container(width: 50,height: 50,decoration: BoxDecoration(color: Colors.amber,shape: BoxShape.circle,),child: Icon(Icons.lightbulb,color: Colors.white,size: 30,),),],),),);}
}
3.2.3 Image组件
class ImageExample extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Image组件示例')),body: Padding(padding: EdgeInsets.all(16.0),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [// 网络图片Image.network('https://picsum.photos/200/200',width: 200,height: 200,fit: BoxFit.cover,loadingBuilder: (context, child, loadingProgress
http://www.dtcms.com/a/343973.html

相关文章:

  • 上海人工智能实验室开源基于Intern-S1同等技术的轻量化开源多模态推理模型
  • WPF MVVM入门系列教程(TabControl绑定到列表并单独指定每一页内容)
  • 【nl2sql综述】2025最新综述解读
  • RAG学习(五)——查询构建、Text2SQL、查询重构与分发
  • Docker 部署 Microsoft SQL Server 指南
  • 第10课:性能优化
  • 如何将照片从iPhone传输到Mac?
  • 如何将文件从 iPad 转移到 iPhone 16/15
  • Node.js 开发 JavaScript SDK 包的完整指南(AI)
  • Cloudflare + nginx 限制ip访问的几种方式(白嫖cloudflare的ip数据库)
  • 数据分类分级的概念、标准解读及实现路径
  • 新零售“实—虚—合”逻辑下定制开发开源AI智能名片S2B2C商城小程序的机遇与演进
  • TCP/UDP详解(一)
  • 高并发的 Spring Boot Web 项目注意点
  • HTTP代理与SOCKS代理的区别、应用场景与选择指南
  • Figma 开源替代品 Penpot 安装与使用
  • 要区分一张图片中的网状图(如网格结构或规则纹理)和噪点(随机分布的干扰像素),比如电路的方法 计算机视觉
  • Unreal Engine ClassName Rule
  • HTTP接口鉴权方式
  • Java面试实战系列【并发篇】- CompletableFuture异步编程实战
  • Node.js中Express框架入门教程
  • vue/react使用h5player对接海康ws视频流实时播放,监控回放
  • 快速入门Vue3——初体验
  • CS创世SD NAND在北京君正平台和瑞芯微RK平台的应用
  • 高压、高功率时代,飞机电气系统如何保障安全?
  • 安全运维过程文档体系规范
  • 2025软件供应链安全技术路线未来趋势预测
  • Docker的安装
  • Docker Hub 镜像一键同步至阿里云 ACR
  • 如何在Windows 10/11家庭版安装组策略编辑器