Telus

Flutter Day02: Image 与 TextField 组件

Mon, 06 Apr 2026 00:00:00 GMT

Flutter Day02: Image 与 TextField 组件

本文整理 Flutter 中常用的图片组件 Image 和输入组件 TextField，包含核心属性与实用示例。

1. Image 组件详解

Image 用于从不同来源（网络、本地资源、文件系统、内存）加载并显示图片。

1.1 常见构造函数（图片来源）

构造函数	描述	示例
`Image.asset()`	从项目资源目录（在 `pubspec.yaml` 中配置）加载图片	`Image.asset('assets/images/logo.png')`
`Image.network()`	从网络 URL 加载图片，支持缓存	`Image.network('https://picsum.photos/300/200')`
`Image.file()`	从设备本地文件系统加载图片	`Image.file(File('/path/to/image.png'))`
`Image.memory()`	从内存字节数组 `Uint8List` 加载图片	`Image.memory(bytes)`

1.2 核心属性

属性	说明	常见值/建议
`fit`	控制图片如何适应容器（最重要）	`BoxFit.cover`（常用）、`contain`、`fill`、`fitWidth`、`fitHeight`
`width` / `height`	图片显示宽高（逻辑像素）	如 `width: 120, height: 120`
`alignment`	图片在容器内对齐方式	默认 `Alignment.center`
`color` + `colorBlendMode`	给图片着色	常用于单色图标或蒙层效果
`repeat`	图片小于容器时平铺	`ImageRepeat.repeat`、`repeatX`、`repeatY`
`frameBuilder`	自定义加载过程（如渐显）	可配合动画提高体验

1.3 `fit` 快速理解

BoxFit.cover: 等比缩放并填满容器，可能裁剪。
BoxFit.contain: 等比缩放完整显示，可能留白。
BoxFit.fill: 强制填满，可能拉伸变形。
BoxFit.fitWidth: 宽度撑满，高度等比缩放。
BoxFit.fitHeight: 高度撑满，宽度等比缩放。

1.4 示例: 常见图片加载与占位

import 'dart:typed_data';
import 'package:flutter/material.dart';

class ImageDemoPage extends StatelessWidget {
	const ImageDemoPage({super.key, required this.memoryBytes});

	final Uint8List memoryBytes;

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: const Text('Image Demo')),
			body: ListView(
				padding: const EdgeInsets.all(16),
				children: [
					const Text('1) Asset 图片'),
					Image.asset(
						'assets/images/logo.png',
						height: 120,
						fit: BoxFit.contain,
					),
					const SizedBox(height: 16),

					const Text('2) 网络图片（带加载中提示和错误兜底）'),
					Image.network(
						'https://picsum.photos/400/200',
						height: 120,
						fit: BoxFit.cover,
						loadingBuilder: (context, child, progress) {
							if (progress == null) return child;
							return const SizedBox(
								height: 120,
								child: Center(child: CircularProgressIndicator()),
							);
						},
						errorBuilder: (context, error, stackTrace) => const SizedBox(
							height: 120,
							child: Center(child: Text('图片加载失败')),
						),
					),
					const SizedBox(height: 16),

					const Text('3) 内存图片'),
					Image.memory(
						memoryBytes,
						height: 120,
						fit: BoxFit.cover,
					),
				],
			),
		);
	}
}

1.5 实战建议

网络图片尽量加 loadingBuilder 和 errorBuilder，避免白屏。
头像、卡片封面常用 BoxFit.cover。
需要渐显效果可使用 FadeInImage。
Flutter 默认有内存缓存；需要磁盘持久化缓存可用 cached_network_image。

2. TextField 组件详解

TextField 是 Material Design 的文本输入框，支持丰富装饰、输入控制和事件回调。

2.1 核心属性

属性	描述	示例 / 备注
`controller`	绑定 `TextEditingController`，用于读写文本	大多数业务场景必备
`decoration`	输入框外观配置	`InputDecoration(...)`
`keyboardType`	键盘类型	`TextInputType.emailAddress`、`number`
`textInputAction`	键盘右下角动作按钮	`TextInputAction.search`、`done`、`next`
`obscureText`	是否隐藏输入内容	密码输入设为 `true`
`onChanged`	文本变化回调	实时搜索、校验
`onSubmitted`	点击动作按钮回调	提交表单、搜索

2.2 InputDecoration 常见字段

labelText: 浮动标签。
hintText: 占位提示。
border: 边框样式（如 OutlineInputBorder()）。
prefixIcon / suffixIcon: 前后图标。
errorText: 错误提示（非 null 时边框变红）。

2.3 示例: 登录表单（含焦点切换与基础校验）

import 'package:flutter/material.dart';

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

	@override
	State<LoginFormPage> createState() => _LoginFormPageState();
}

class _LoginFormPageState extends State<LoginFormPage> {
	final _emailController = TextEditingController();
	final _passwordController = TextEditingController();
	final _passwordFocus = FocusNode();

	String? _emailError;
	String? _passwordError;

	@override
	void dispose() {
		_emailController.dispose();
		_passwordController.dispose();
		_passwordFocus.dispose();
		super.dispose();
	}

	void _submit() {
		final email = _emailController.text.trim();
		final password = _passwordController.text;

		setState(() {
			_emailError = email.contains('@') ? null : '请输入正确的邮箱';
			_passwordError = password.length >= 6 ? null : '密码至少 6 位';
		});

		if (_emailError == null && _passwordError == null) {
			ScaffoldMessenger.of(context).showSnackBar(
				const SnackBar(content: Text('登录请求已提交')),
			);
		}
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: const Text('TextField Demo')),
			body: Padding(
				padding: const EdgeInsets.all(16),
				child: Column(
					children: [
						TextField(
							controller: _emailController,
							keyboardType: TextInputType.emailAddress,
							textInputAction: TextInputAction.next,
							onSubmitted: (_) => _passwordFocus.requestFocus(),
							decoration: InputDecoration(
								labelText: '邮箱',
								hintText: '请输入邮箱地址',
								prefixIcon: const Icon(Icons.email_outlined),
								border: const OutlineInputBorder(),
								errorText: _emailError,
							),
						),
						const SizedBox(height: 12),
						TextField(
							controller: _passwordController,
							focusNode: _passwordFocus,
							obscureText: true,
							textInputAction: TextInputAction.done,
							onSubmitted: (_) => _submit(),
							decoration: InputDecoration(
								labelText: '密码',
								hintText: '请输入密码',
								prefixIcon: const Icon(Icons.lock_outline),
								border: const OutlineInputBorder(),
								errorText: _passwordError,
							),
						),
						const SizedBox(height: 16),
						SizedBox(
							width: double.infinity,
							child: FilledButton(
								onPressed: _submit,
								child: const Text('登录'),
							),
						),
					],
				),
			),
		);
	}
}

2.4 实战建议

优先使用 TextEditingController 获取输入值。
在 StatefulWidget 中记得 dispose() 控制器和 FocusNode。
表单较复杂时建议配合 Form + TextFormField + validator。
搜索框可用 onChanged，提交行为可用 onSubmitted。

Flutter Day03: 常用滚动组件

Mon, 06 Apr 2026 00:00:00 GMT

Flutter Day03 - 常用滚动组件笔记

1. SingleChildScrollView

1.1 组件作用

让单个子组件具备滚动能力。
常见搭配是 Column，用于承载一组内容块。

1.2 适用场景

长表单。
设置页。
内容总量不大但高度不固定的页面。

1.3 特点

子节点会一次性渲染完成。
代码简单，适合中小体量内容。
数据量很大时性能不如 ListView.builder。

1.4 代码引用（你的示例）

import 'package:flutter/material.dart';

void main() {
	runApp(const MySingleChildScrollView());
}

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

	@override
	State<MySingleChildScrollView> createState() =>
			_MySingleChildScrollViewState();
}

class _MySingleChildScrollViewState extends State<MySingleChildScrollView> {
	ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text('SingleChildScrollView')),
				body: Stack(
					children: [
						SingleChildScrollView(
							controller: _scrollController,
							padding: const EdgeInsets.all(20),
							child: Column(
								children: List.generate(100, (index) {
									return Container(
										margin: const EdgeInsets.only(top: 10),
										alignment: Alignment.center,
										width: double.infinity,
										height: 100,
										color: Colors.blue,
										child: Text(
											"Item $index",
											style: const TextStyle(color: Colors.white, fontSize: 20),
										),
									);
								}),
							),
						),
						Positioned(
							bottom: 20,
							right: 20,
							child: GestureDetector(
								onTap: () {
									_scrollController.animateTo(
										_scrollController.position.maxScrollExtent,
										duration: const Duration(seconds: 1),
										curve: Curves.easeInOut,
									);
								},
								child: Container(
									height: 80,
									width: 80,
									decoration: BoxDecoration(
										color: Colors.red,
										borderRadius: BorderRadius.circular(40),
									),
									alignment: Alignment.center,
									child: const Text(
										"跳转底部",
										style: TextStyle(color: Colors.white, fontSize: 16),
									),
								),
							),
						),
						Positioned(
							top: 20,
							right: 20,
							child: GestureDetector(
								onTap: () {
									_scrollController.animateTo(
										_scrollController.position.minScrollExtent,
										duration: const Duration(seconds: 1),
										curve: Curves.easeInOut,
									);
								},
								child: Container(
									height: 80,
									width: 80,
									decoration: BoxDecoration(
										color: Colors.red,
										borderRadius: BorderRadius.circular(40),
									),
									alignment: Alignment.center,
									child: const Text(
										"跳转顶部",
										style: TextStyle(color: Colors.white, fontSize: 16),
									),
								),
							),
						),
					],
				),
			),
		);
	}
}

1.5 关键点总结

ScrollController 可控制滚动位置。
animateTo 有动画，jumpTo 无动画。
Stack + Positioned 可以叠加悬浮按钮（顶部/底部跳转）。

1.6 常用属性知识点及应用

属性	说明	常见应用
`controller`	绑定滚动控制器	点击按钮回到顶部/底部、监听滚动位置
`scrollDirection`	滚动方向，默认纵向	横向图片流可设置为 `Axis.horizontal`
`reverse`	是否反向滚动	聊天列表需要从底部开始时可用
`padding`	内容内边距	页面留白、避免内容贴边
`physics`	滚动行为	使用 `BouncingScrollPhysics` 实现 iOS 弹性效果
`child`	单个子组件	通常放 `Column`、`Form` 等组合内容

应用示例：

SingleChildScrollView(
	controller: _scrollController,
	scrollDirection: Axis.vertical,
	padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
	physics: const BouncingScrollPhysics(),
	child: Column(
		children: const [
			Text('表单标题'),
			SizedBox(height: 12),
			Text('更多内容...'),
		],
	),
)

2. ListView.builder

2.1 组件作用

构建长列表。
按需渲染可见区域的 item，提高性能。

2.2 适用场景

数据量较大列表。
列表项结构基本一致。

2.3 代码引用（你的示例）

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

	@override
	State<MyListView1> createState() => _MyListViewState1();
}

class _MyListViewState1 extends State<MyListView1> {
	ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text("ListView.builder")),
				body: ListView.builder(
					itemCount: 100,
					itemBuilder: (BuildContext context, int index) {
						return Container(
							margin: EdgeInsets.only(top: 10),
							alignment: Alignment.center,
							width: double.infinity,
							height: 100,
							color: Colors.blue,
							child: Text(
								"Item $index",
								style: TextStyle(color: Colors.white, fontSize: 20),
							),
						);
					},
					padding: EdgeInsets.all(20),
				),
			),
		);
	}
}

2.4 关键参数

itemCount: 列表总项数。
itemBuilder: 按索引构建每一项。
padding: 列表内边距。

2.5 常用属性知识点及应用

属性	说明	常见应用
`itemCount`	列表项数量	避免无限构建，明确数据边界
`itemBuilder`	按索引构建 item	大列表按需渲染，减少内存占用
`controller`	列表滚动控制器	上拉分页、回到顶部、读取偏移量
`scrollDirection`	滚动方向	横向商品卡片列表
`padding`	列表留白	内容布局更美观
`physics`	滚动物理效果	禁止滚动可用 `NeverScrollableScrollPhysics`
`shrinkWrap`	按内容收缩尺寸	嵌套在 `Column` 时常用（注意性能）

应用示例：

ListView.builder(
	controller: _scrollController,
	itemCount: 100,
	padding: const EdgeInsets.all(16),
	physics: const AlwaysScrollableScrollPhysics(),
	itemBuilder: (context, index) {
		return ListTile(
			title: Text('Item $index'),
		);
	},
)

3. ListView.separated

3.1 组件作用

与 ListView.builder 一样按需渲染。
额外提供分割线构建函数。

3.2 适用场景

需要明确区分 item 与 item 的列表。
例如：订单列表、消息列表、设置分组项。

3.3 代码引用（你的示例）

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

	@override
	State<MyListView2> createState() => _MyListViewState2();
}

class _MyListViewState2 extends State<MyListView2> {
	ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text("ListView.separated")),
				body: ListView.separated(
					itemCount: 100,
					itemBuilder: (BuildContext context, int index) {
						return Container(
							alignment: Alignment.center,
							width: double.infinity,
							height: 100,
							color: Colors.blue,
							child: Text(
								"Item $index",
								style: TextStyle(color: Colors.white, fontSize: 20),
							),
						);
					},
					separatorBuilder: (BuildContext context, int index) {
						return Container(
							height: 1,
							color: Colors.grey,
						);
					},
					padding: EdgeInsets.all(20),
				),
			),
		);
	}
}

3.4 关键参数

itemBuilder: 构建列表项。
separatorBuilder: 构建分割线。
itemCount: 列表项数量。

3.5 常用属性知识点及应用

属性	说明	常见应用
`itemCount`	item 数量	与后端数据长度保持一致
`itemBuilder`	构建每个列表项	渲染消息、订单、评论等结构化数据
`separatorBuilder`	构建分割区域	分割线、分组间距、时间分隔条
`controller`	滚动控制	无限加载、回滚定位
`padding`	列表内边距	统一页面边距规范
`physics`	滚动行为控制	嵌套滚动时配置更稳定

应用示例：

ListView.separated(
	itemCount: 20,
	padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
	itemBuilder: (context, index) {
		return ListTile(
			title: Text('消息 $index'),
			subtitle: const Text('这是一条消息预览'),
		);
	},
	separatorBuilder: (context, index) {
		return const Divider(height: 1);
	},
)

4. 三种滚动组件对比

组件	渲染方式	适合场景	优点	注意点
SingleChildScrollView	一次性渲染全部内容	内容不多、结构灵活页面	使用简单	内容太多会影响性能
ListView.builder	按需渲染	长列表、大数据量	性能好	item 结构建议稳定
ListView.separated	按需渲染 + 分隔构建	需要分割线的长列表	结构清晰	分隔线逻辑单独维护

5. 学习小结

页面内容总量少：优先 SingleChildScrollView。
大数据列表：优先 ListView.builder。
大数据且要分隔效果：优先 ListView.separated。
需要程序化滚动控制时，搭配 ScrollController。

Flutter Day04: GridView 与 CustomScrollView

Mon, 06 Apr 2026 00:00:00 GMT

Flutter Day04：GridView 与 CustomScrollView 知识点

1. GridView 组件概述

GridView 用于展示二维网格列表，适合图片墙、商品列表等网格布局页面。

核心特点：

支持滚动。
支持网格布局（按列数或按最大宽度）。
支持按需渲染（懒加载），只构建当前可见区域的 item，离开可视区域的 item 会被回收，性能更好。

2. GridView.count 模式（按列数布局）

常用属性

crossAxisCount：每行（垂直滚动时）的列数。
mainAxisSpacing：主轴方向 item 间距。
crossAxisSpacing：交叉轴方向 item 间距。
childAspectRatio：item 宽高比（宽 / 高）。
padding：GridView 内边距。
scrollDirection：滚动方向，默认 Axis.vertical。
children：直接传入子组件列表。

示例代码

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

	@override
	State<MyGridView1> createState() => _MyGridViewState1();
}

class _MyGridViewState1 extends State<MyGridView1> {
	final ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text("GridView.count")),
				body: GridView.count(
					controller: _scrollController,
					scrollDirection: Axis.vertical,
					crossAxisCount: 3,
					mainAxisSpacing: 10,
					crossAxisSpacing: 10,
					childAspectRatio: 1,
					padding: const EdgeInsets.all(20),
					children: List.generate(100, (index) {
						return Container(
							color: Colors.blue,
							alignment: Alignment.center,
							child: Text(
								"Item $index",
								style: const TextStyle(color: Colors.white, fontSize: 20),
							),
						);
					}),
				),
			),
		);
	}
}

3. GridView.extent 模式（按最大宽度布局）

GridView.extent 通过 maxCrossAxisExtent 控制 item 最大宽度，列数会根据屏幕宽度自动变化。

例如：

item 最大宽度为 100。
屏幕足够宽时每行可放 3 个。
屏幕变窄后会自动降为 2 个或 1 个。

常用属性

maxCrossAxisExtent：每个 item 在交叉轴方向的最大尺寸。
mainAxisSpacing：主轴方向 item 间距。
crossAxisSpacing：交叉轴方向 item 间距。
childAspectRatio：item 宽高比。
padding：内边距。

示例代码

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

	@override
	State<MyGridView2> createState() => _MyGridViewState2();
}

class _MyGridViewState2 extends State<MyGridView2> {
	final ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text("GridView.extent")),
				body: GridView.extent(
					controller: _scrollController,
					scrollDirection: Axis.vertical,
					maxCrossAxisExtent: 100,
					mainAxisSpacing: 10,
					crossAxisSpacing: 10,
					childAspectRatio: 1,
					padding: const EdgeInsets.all(20),
					children: List.generate(100, (index) {
						return Container(
							color: Colors.blue,
							alignment: Alignment.center,
							child: Text(
								"Item $index",
								style: const TextStyle(color: Colors.white, fontSize: 20),
							),
						);
					}),
				),
			),
		);
	}
}

4. GridView.builder 模式（推荐大数据量）

GridView.builder 适合大量数据场景，按需构建 item。

常用属性

itemBuilder：构建每个 item 的回调，参数为 context 和 index。
itemCount：item 总数量。
gridDelegate：网格布局规则。
padding：内边距。
scrollDirection：滚动方向。

gridDelegate 常见类型

SliverGridDelegateWithFixedCrossAxisCount：按固定列数布局。
SliverGridDelegateWithMaxCrossAxisExtent：按最大宽度布局。

示例代码

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

	@override
	State<MyGridView3> createState() => _MyGridViewState3();
}

class _MyGridViewState3 extends State<MyGridView3> {
	final ScrollController _scrollController = ScrollController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text("GridView.builder")),
				body: GridView.builder(
					controller: _scrollController,
					scrollDirection: Axis.vertical,
					padding: const EdgeInsets.all(20),
					gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
						crossAxisCount: 3,
						mainAxisSpacing: 10,
						crossAxisSpacing: 10,
						childAspectRatio: 1,
					),
					itemCount: 100,
					itemBuilder: (BuildContext context, int index) {
						return Container(
							color: Colors.blue,
							alignment: Alignment.center,
							child: Text(
								"Item $index",
								style: const TextStyle(color: Colors.white, fontSize: 20),
							),
						);
					},
				),
			),
		);
	}
}

5. CustomScrollView 组件概述

CustomScrollView 用于组合多个可滚动区域，并支持更灵活的滚动效果（如轮播图、吸顶分类、混合列表等）。

关键点：

slivers 参数中只能放 Sliver 组件。
不能直接放普通 Container（可用 SliverToBoxAdapter 包裹）。
常见 Sliver：
- SliverToBoxAdapter：包裹普通组件。
- SliverList：列表。
- SliverGrid：网格。
- SliverPersistentHeader：可配置吸顶头部。

轮播图相关状态与属性

_currentPage：当前轮播页索引，用于更新分页小圆点颜色。
PageController：控制 PageView 翻页。
onPageChanged：监听手势滑动后的页码变化。
animateToPage：点击小圆点时平滑跳转到指定页。

SliverPersistentHeader 相关属性

pinned: true：吸顶固定。
floating: false：不会在反向滚动时立即浮现。
delegate：头部布局和行为委托。

示例代码

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

	@override
	State<MyCustomScrollView> createState() => _MyCustomScrollViewState();
}

class _MyCustomScrollViewState extends State<MyCustomScrollView> {
	int _currentPage = 0;
	final PageController _pageController = PageController();

	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			home: Scaffold(
				appBar: AppBar(title: const Text("CustomScrollView")),
				body: CustomScrollView(
					slivers: [
						SliverToBoxAdapter(
							child: Stack(
								children: [
									Container(
										height: 260,
										color: Colors.blue,
										alignment: Alignment.center,
										child: PageView.builder(
											controller: _pageController,
											onPageChanged: (index) {
												setState(() {
													_currentPage = index;
												});
											},
											itemBuilder: (BuildContext context, int index) {
												return Container(
													color: Colors.blue,
													alignment: Alignment.center,
													child: Text(
														"轮播图 $index",
														style: const TextStyle(color: Colors.white, fontSize: 20),
													),
												);
											},
											itemCount: 10,
										),
									),
									Positioned(
										bottom: 0,
										left: 0,
										right: 0,
										height: 30,
										child: Row(
											mainAxisAlignment: MainAxisAlignment.center,
											children: List.generate(10, (index) {
												return GestureDetector(
													onTap: () {
														_pageController.animateToPage(
															index,
															duration: const Duration(milliseconds: 300),
															curve: Curves.easeInOut,
														);
														setState(() {
															_currentPage = index;
														});
													},
													child: Container(
														width: 10,
														height: 10,
														margin: const EdgeInsets.symmetric(horizontal: 10),
														decoration: BoxDecoration(
															color: _currentPage == index ? Colors.red : Colors.grey,
															shape: BoxShape.circle,
														),
													),
												);
											}),
										),
									),
								],
							),
						),
						const SliverToBoxAdapter(
							child: SizedBox(height: 20),
						),
						SliverPersistentHeader(
							delegate: _StickyCategory(),
							floating: false,
							pinned: true,
						),
						SliverList.separated(
							itemCount: 100,
							itemBuilder: (BuildContext context, int index) {
								return Container(
									alignment: Alignment.center,
									width: double.infinity,
									height: 100,
									color: Colors.blue,
									child: Text(
										"Item $index",
										style: const TextStyle(color: Colors.white, fontSize: 20),
									),
								);
							},
							separatorBuilder: (BuildContext context, int index) {
								return const SizedBox(height: 10);
							},
						),
					],
				),
			),
		);
	}
}

6. SliverPersistentHeaderDelegate 吸顶头部

通过自定义 SliverPersistentHeaderDelegate，可以实现吸顶分类栏。

关键方法与属性

build(context, shrinkOffset, overlapsContent)：构建头部 UI。
- shrinkOffset：头部收缩量。
- overlapsContent：是否与下方内容重叠。
maxExtent：头部最大高度。
minExtent：头部最小高度。
shouldRebuild(oldDelegate)：是否需要重建。
- 头部配置不变时返回 false，可提升性能。

示例代码

class _StickyCategory extends SliverPersistentHeaderDelegate {
	@override
	Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
		return Container(
			color: Colors.white,
			child: ListView.builder(
				scrollDirection: Axis.horizontal,
				itemCount: 10,
				itemBuilder: (BuildContext context, int index) {
					return Container(
						alignment: Alignment.center,
						width: 100,
						height: 60,
						margin: const EdgeInsets.symmetric(horizontal: 10),
						color: Colors.blue,
						child: Text(
							"分类 $index",
							style: const TextStyle(color: Colors.white, fontSize: 20),
						),
					);
				},
			),
		);
	}

	@override
	double get maxExtent => 80;

	@override
	double get minExtent => 60;

	@override
	bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
		return false;
	}
}

7. PageView 轮播补充知识点

在你的代码里，轮播图通过 PageView.builder 放在 SliverToBoxAdapter 中，再用 Stack + Positioned 叠加分页指示器。

这种实现的优点：

轮播区域属于整页滚动的一部分，可与下方 Sliver 一起滚动。
指示器覆盖在轮播图底部，UI 更接近电商首页效果。
手势滑动与点击圆点都能更新 _currentPage，交互一致。

建议补充：

在 State 中重写 dispose，释放 _pageController，避免内存泄漏。

@override
void dispose() {
	_pageController.dispose();
	super.dispose();
}

8. 选型建议

数据量小、结构固定：优先 GridView.count。
需要自适应列数：使用 GridView.extent。
数据量大或来自接口分页：使用 GridView.builder。
页面有复杂滚动交互（吸顶、折叠、混合布局）：使用 CustomScrollView + Sliver。

Flutter Day01: 布局与状态管理核心

Mon, 06 Apr 2026 00:00:00 GMT

Flutter 核心知识点笔记

适用对象：Flutter 初学者到进阶开发者
学习目标：掌握常见布局组件、状态更新机制，并能根据场景选择合适组件

布局遵循规则

在 Flutter 中，布局遵循“向下传递约束，向上传递尺寸”的原则。

布局核心规则

父组件向子组件传递约束（Constraints）。
子组件在约束内确定自身尺寸（Size）。
子组件将尺寸回传给父组件，父组件再决定其位置（Position）。

理解这个规则后，很多“为什么不生效”或“为什么溢出”的问题会更容易定位。

一、StatefulWidget 与 setState 状态管理

在 Flutter 中，当页面上的数据发生变化且需要实时更新 UI 时，通常要使用 StatefulWidget。

1. 核心机制

StatefulWidget：组件本身是不可变的，它通过 createState() 创建一个 State 对象。
State 对象：存储组件的可变数据（如代码中的 count），并负责构建 UI。
setState()：通知框架“状态已更改”的关键方法。调用后，Flutter 会将该组件标记为“脏”（dirty），并在下一帧触发 build 方法重新运行，从而根据新数据渲染界面。

2. 代码中的具体应用

数据定义：int count = 0;（定义在 State 类中）。
状态触发示例：

onPressed: () {
  count++; // 1. 修改变量值
  setState(() {}); // 2. 触发 UI 刷新
}

注意：setState 内部通常包裹修改逻辑（如 setState(() => count++)）。但即使是空回调，只要调用了它，当前 Widget 及其子树就会重新构建。

二、Container 容器组件详解

Container 是 Flutter 中常用的通用布局组件，它结合了绘制、定位和调整大小等功能。

1. 基础布局属性

属性	描述	示例
`width` / `height`	设置容器的固定宽高（逻辑像素）	`width: 200`
`alignment`	控制子组件（`child`）在容器内的对齐方式	`Alignment.center`
`margin`	容器外部与其他组件的间距（外边距）	`EdgeInsets.all(20.0)`
`padding`	容器内部边缘与子组件的间距（内边距）	`EdgeInsets.symmetric(...)`
`transform`	对容器进行矩阵变换，如旋转、缩放、平移	`Matrix4.rotationZ(0.1)`

2. BoxDecoration 装饰器

decoration 属性允许我们美化容器。

注意：一旦使用了 decoration，Container 自身的 color 属性必须移除。

color：背景颜色（如 Colors.blue）。
borderRadius：设置圆角（BorderRadius.circular(15.0)）。
border：设置边框颜色和宽度（Border.all(color: Colors.amber, width: 3.0)）。

三、Scaffold 页面骨架组件

Scaffold 是 Material 风格页面的基础骨架组件，通常作为一个页面最外层的结构容器。

它可以快速组织页面常见区域，例如：

顶部导航栏（appBar）
页面主体内容区（body）
悬浮操作按钮（floatingActionButton）
抽屉菜单（drawer）
底部导航栏（bottomNavigationBar）
底部操作栏（bottomSheet）

1. 常用属性

属性	作用	常见写法
`appBar`	配置顶部应用栏	`AppBar(title: Text('首页'))`
`body`	页面主体内容	`Center(child: Text('Hello'))`
`floatingActionButton`	悬浮按钮，常用于主要操作	`FloatingActionButton(...)`
`drawer`	左侧抽屉菜单	`Drawer(child: ListView(...))`
`bottomNavigationBar`	底部导航栏	`BottomNavigationBar(...)`
`backgroundColor`	页面背景色	`Colors.grey[100]`

2. 基础示例

Scaffold(
  appBar: AppBar(
    title: const Text('Scaffold 示例'),
  ),
  body: const Center(
    child: Text('页面内容区域'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 点击后执行主要操作
    },
    child: const Icon(Icons.add),
  ),
)

3. 使用建议

一个页面通常对应一个 Scaffold。
如果页面已经有外层 Scaffold，子组件中一般不再重复嵌套，避免布局和返回行为混乱。
需要显示提示条时，可结合 ScaffoldMessenger 使用 SnackBar。

四、Align 与 Container 的嵌套关系

1. `Align` 放在 `Container` 内部

结构：Container -> Align -> Child

谁决定位置：Align 决定子组件（Child）在 Container 内部的位置。
Container 的表现：大小由自身 width、height 或父组件约束决定。
实际效果：Container 像一个固定画框，Align 只是在画框内部移动内容。
注意：不会改变 Container 自身在屏幕中的位置。

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
  child: Align(
    alignment: Alignment.bottomRight,
    child: Text("我在内部"),
  ),
)

2. `Container` 放在 `Align` 内部

结构：Align -> Container -> Child

谁决定位置：Align 决定整个 Container 在父级空间中的位置。
Align 的表现：通常占据父组件可用空间，再按 alignment 摆放子组件。
实际效果：Align 充当“定位员”，可解决 Container 默认靠左上角的问题。

Align(
  alignment: Alignment.center,
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
    child: Text("我在中间"),
  ),
)

3. 核心区别对比

维度	Container 套 Align	Align 套 Container
控制对象	控制子组件的对齐方式	控制 Container 自身的对齐方式
容器大小	容器大小固定，子组件在里面动	容器大小固定，容器在父空间里动
父级占用	Container 仅占用设定的 `200x200`	Align 默认可填满父级可用空间
常见用途	制作带复杂内部布局的卡片	调整组件在页面中的摆放位置

4. 特殊情况：`Container` 的 `alignment` 属性

Container 内部已经集成了类似 Align 的逻辑。示例：

Container(
  alignment: Alignment.center,
  child: Text("Hello"),
)

这在逻辑上等同于“将 Align 放在 Container 内部”。它只会让文字在容器中居中，不会让容器在页面中居中。

5. 总结建议

想让“盒子里的内容”换位置：把 Align 放在 Container 里，或直接使用 Container.alignment。
想让“整个盒子”换位置：把 Container 放在 Align 里。

五、Padding（内边距组件）

Padding 专门用于给子组件增加内边距。

1. 核心属性

padding：接收 EdgeInsetsGeometry 类型。
常见写法：
- EdgeInsets.all(10.0)：四周相等。
- EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)：水平和垂直对称。
- EdgeInsets.only(left: 10, top: 5)：指定单边。
- EdgeInsets.fromLTRB(left, top, right, bottom)：按左上右下设置。

2. 知识点

Padding 是单一职责组件，只负责间距，通常比通用 Container 更轻量。
需要多层间距时，可嵌套多个 Padding。

3. 案例代码与实际效果

Container(
  color: Colors.grey.shade300,
  child: Padding(
    padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),//横向和纵向
    child: Container(
      color: Colors.blue,
      child: const Text(
        '有内边距的文本',
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
)

实际效果：蓝色内容块不会贴着灰色边缘，而是与四周保持稳定留白，视觉更舒展。

六、线性布局：Row 与 Column

Row 和 Column 分别用于水平方向与垂直方向排列子组件。

1. 核心属性

属性	功能	备注
`children`	接收 `List<Widget>`	放置多个子组件
`mainAxisAlignment`	主轴对齐方式	`Row` 主轴水平，`Column` 主轴垂直
`crossAxisAlignment`	交叉轴对齐方式	`Row` 交叉轴垂直，`Column` 交叉轴水平
`mainAxisSize`	主轴占用大小	`MainAxisSize.max` 或 `MainAxisSize.min`

2. 常见主轴对齐值

MainAxisAlignment.start：起点对齐。
MainAxisAlignment.center：居中。
MainAxisAlignment.end：终点对齐。
MainAxisAlignment.spaceBetween：两端贴边，中间均匀分隔。
MainAxisAlignment.spaceAround：每个子项两侧间距相等。
MainAxisAlignment.spaceEvenly：所有间距（含两端）完全相等。

3. 案例代码与实际效果

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: const [
    Icon(Icons.home, size: 32),
    Icon(Icons.search, size: 32),
    Icon(Icons.person, size: 32),
  ],
)

实际效果：三个图标在一行中平均分布，左右留白与图标间距保持一致。

七、Flex（弹性布局）

Flex 是 Row 与 Column 的底层通用形式。

1. 核心属性

direction：必填。
- Axis.horizontal 等同于 Row。
- Axis.vertical 等同于 Column。

2. 配合组件：`Expanded` 与 `Flexible`

Expanded：强制子项填满主轴剩余空间。
Flexible：允许子项参与弹性分配，但不强制填满。
flex：分配权重，默认是 1。

3. 案例代码与实际效果

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(
      flex: 2,
      child: Container(height: 60, color: Colors.red),
    ),
    Expanded(
      flex: 1,
      child: Container(height: 60, color: Colors.green),
    ),
  ],
)

实际效果：红色与绿色区域按 2:1 分配宽度，红色区域约为绿色的两倍。

八、Wrap（流式布局）

当 Row 或 Column 子组件超出可用空间时，容易出现 Overflow。Wrap 可自动换行（或换列）。

1. 核心属性

direction：排列方向，默认 Axis.horizontal。
spacing：主轴方向子项间距。
runSpacing：换行后行与行之间间距。
alignment：每一行在主轴上的对齐方式。
runAlignment：多行整体在交叉轴上的对齐方式。

2. 知识点

组件数量不确定时（如标签云、筛选项），优先考虑 Wrap。
相比 Row，Wrap 能在小屏设备上更自然适配。

3. 案例代码与实际效果

Wrap(
  spacing: 8,
  runSpacing: 8,
  children: [
    for (final tag in ['Flutter', 'Dart', '状态管理', '布局', '动画', '网络'])
      Chip(label: Text(tag)),
  ],
)

实际效果：标签在一行放不下时会自动换到下一行，避免右侧溢出报错。

九、常见易错点速查

1. `setState` 调用了但界面没更新

常见原因：修改的变量不在当前 State 中，或 UI 没有使用该变量。
解决建议：确认“数据定义位置”和“build 中是否读取该数据”。

2. `Container` 设置了 `decoration` 又设置 `color`

常见原因：同一层同时设置 decoration 和 color。
解决建议：颜色放到 BoxDecoration(color: ...) 中，不再单独写 color。

3. `Row` 子项过多出现黄色黑纹溢出

常见原因：Row 不会自动换行。
解决建议：改用 Wrap，或配合 Expanded/Flexible 做弹性压缩。

4. 以为 `Container(alignment: ...)` 能移动整个容器

常见原因：混淆“内容对齐”和“组件定位”。
解决建议：Container.alignment 只影响子组件；要移动整个容器，使用外层 Align。

十、综合案例：构建一个可自适应的卡片区域

下面的示例同时使用了 Scaffold、setState、Padding、Wrap、Container 和 Align。

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

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  int count = 0;
  final List<String> tags = ['Flutter', '布局', '状态', '组件化', '响应式'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('综合案例')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => count++),
        child: const Icon(Icons.add),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: double.infinity,
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue.shade50,
                borderRadius: BorderRadius.circular(12),
                border: Border.all(color: Colors.blue.shade200),
              ),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text('点击次数：$count', style: const TextStyle(fontSize: 18)),
              ),
            ),
            const SizedBox(height: 16),
            Wrap(
              spacing: 8,
              runSpacing: 8,
              children: [
                for (final tag in tags) Chip(label: Text(tag)),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

实际效果：

点击右下角按钮，顶部计数文本实时刷新。
卡片区域有统一内边距、圆角和边框，视觉层次清晰。
标签区会随屏幕宽度自动换行，小屏设备也不易溢出。

十一、Stack（层叠布局组件）

Stack 允许子组件按绘制顺序叠放。通常后添加的子组件会显示在更上层。

1. 核心属性

属性	功能	常见值
`alignment`	控制未定位子组件的对齐方式	`Alignment.center`、`Alignment.bottomRight`
`fit`	控制非定位子组件如何适应 `Stack` 大小	`StackFit.loose`（默认）、`StackFit.expand`
`clipBehavior`	子组件超出范围时的裁剪策略	`Clip.none`、`Clip.hardEdge`
`children`	子组件列表，后面的会覆盖前面的	`[]`

2. 配合组件：`Positioned`

在 Stack 中，通常使用 Positioned 精确控制子组件位置。

常用属性：top、bottom、left、right、width、height。
关键点：一旦子组件被 Positioned 包裹，它会变成“定位组件”，不再受 Stack.alignment 影响。

3. 案例代码与实际效果

Stack(
  children: [
    Container(
      width: 220,
      height: 120,
      decoration: BoxDecoration(
        color: Colors.blue.shade100,
        borderRadius: BorderRadius.circular(12),
      ),
    ),
    Positioned(
      top: 8,
      right: 8,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.circular(10),
        ),
        child: const Text('NEW', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)

实际效果：蓝色卡片右上角叠加一个红色角标，常用于消息数量、活动状态等提示场景。

十二、Text（文本组件）

Text 用于显示单一样式或轻量样式的字符串内容。

1. 核心属性

属性	作用	示例
`data`	文本内容（位置参数）	`Text('Flutter')`
`style`	文本样式	`TextStyle(fontSize: 16)`
`textAlign`	水平对齐方式	`TextAlign.center`
`overflow`	溢出处理	`TextOverflow.ellipsis`
`maxLines`	最大显示行数	`maxLines: 2`
`textScaler`	字体缩放策略（新写法）	`TextScaler.linear(1.1)`

2. `TextStyle` 常用配置

color：文本颜色。
fontSize：字号。
fontWeight：字重，如 FontWeight.bold。
fontStyle：斜体，如 FontStyle.italic。
letterSpacing：字间距。
height：行高倍数，例如 height: 1.5。

3. 案例代码与实际效果

const Text(
  '这是一段很长的说明文字，超出两行后会显示省略号，避免破坏列表布局。',
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(fontSize: 14, height: 1.4),
)

实际效果：文本最多显示两行，第三行内容被省略，适合卡片列表和新闻摘要场景。

十三、TextSpan 与 RichText（富文本）

当一句话里需要多种颜色、字号、字重，或希望某一段文字可点击时，应使用 Text.rich / RichText + TextSpan。

1. 核心结构

TextSpan 不是组件（Widget），而是文本片段描述对象。
通过 children 形成树形结构，子片段会继承父级样式。

Text.rich(
  TextSpan(
    text: '同意并继续：',
    style: const TextStyle(color: Colors.black87),
    children: [
      TextSpan(
        text: '《用户协议》',
        style: const TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
        ),
      ),
      const TextSpan(text: ' 与 '),
      TextSpan(
        text: '《隐私政策》',
        style: const TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
        ),
      ),
    ],
  ),
)

2. 常用属性速查

属性	说明
`text`	当前片段文本
`style`	当前片段样式
`children`	子片段列表（`List<InlineSpan>`）
`recognizer`	手势识别器，用于点击事件

3. 点击事件注意点

使用 TapGestureRecognizer 时，若在 StatefulWidget 中长期持有，需要在 dispose 中释放，避免内存泄漏。
对可点击文本建议增加视觉提示（颜色、下划线），提高可用性。

4. 适用场景建议

协议勾选说明（如“同意《用户协议》”）。
价格文本（如“原价 + 现价”不同样式）。
关键词高亮（搜索结果关键字着色）。

MarkDown基础教程

Sat, 21 Mar 2026 00:00:00 GMT

Markdown 入门与进阶实战教程

这篇文章按“能马上写出一篇规范博客”为目标，带你从基础语法到实战排版一步走完。看完后，你应该可以：

独立写出结构清晰的 Markdown 文档。
用 VS Code 高效预览、管理和导出内容。
避开常见语法坑，让文章在不同平台都稳定显示。

准备工作

1. 安装编辑器

VS Code 下载地址： https://code.visualstudio.com/

2. 推荐插件

Markdown All in One：快捷键、目录生成、列表增强。
Markdown Preview Enhanced：预览增强、数学公式、图表支持。
Paste Image：快速粘贴图片并自动生成链接。
Markdown PDF（可选）：导出 PDF，但复杂样式时不一定稳定。

3. 基本工作流

新建 xxx.md 文件。
使用 VS Code 预览：Ctrl+Shift+V。
左边写作，右边预览，边改边看。

基础语法

1. 标题

# 一级标题
## 二级标题
### 三级标题

建议一篇文章只使用一个一级标题，正文从二级标题开始。

2. 段落与换行

空一行表示新段落。
行尾加两个空格再回车表示强制换行。
分割线常用 --- 或 ***。

3. 引用

> 一级引用
>> 二级引用

示例：

这是一级引用。

这是二级引用。

4. 列表

无序列表可用 -、*、+，建议统一一种风格：

- 列表项 A
- 列表项 B
  - 子项 B1

有序列表：

1. 第一步
2. 第二步
3. 第三步

任务列表（Todo）：

- [x] 已完成
- [ ] 未完成

5. 文本强调

效果	语法
斜体	`斜体`
粗体	`粗体`
粗斜体	`*粗斜体*`
删除线	`~~删除线~~`
行内代码	`code`

说明：<u>下划线</u> 这类 HTML 标签也可用，但不同平台兼容性略有差异。

6. 代码块

建议给代码块加语言标识，方便高亮：

#include <iostream>
using namespace std;

int main() {
  cout << "hello world" << endl;
  return 0;
}

行内代码示例：print("hello world");

7. 表格

| 左对齐 | 居中对齐 | 右对齐 |
| :-- | :--: | --: |
| a | b | c |

8. 链接与图片

行内链接：

[Markdown 教程](https://www.runoob.com/markdown/md-tutorial.html)

引用式链接：

查看更多请看[教程][md-guide]

[md-guide]: https://www.runoob.com/markdown/md-tutorial.html

图片：

![图片说明](https://example.com/demo.png)

可点击放大图：

常用扩展语法

1. 数学公式（LaTeX）

行内公式：$f(x)=ax+b$
块级公式：

$$ \begin{Bmatrix} a & b \ c & d \end{Bmatrix} $$

2. HTML 混写

Markdown 中可以直接写 HTML，例如居中图片：

适用场景：Markdown 语法不够表达时，用 HTML 补充。

实战排版建议

每个二级标题聚焦一个主题，控制段落长度。
代码块都标语言，避免“纯文本代码”。
列表缩进统一 2 或 4 空格，不要混用。
链接文案要有语义，不要只写“点这里”。
图片加 alt，便于可访问性和 SEO。

常见问题与排错

1. 目录点击不跳转

原因：标题锚点与目录链接不一致。
建议：先确定标题文本，再复制自动生成的锚点。

2. 表格错位

原因：中英文字符宽度混合、列数不一致。
建议：先保证每行列数一致，再调整对齐符号。

3. 代码不高亮

原因：代码块没写语言标识。
建议：把 改为js、cpp、bash 等。

4. 公式不渲染

原因：预览器或站点未启用数学插件。
建议：确认你的 Markdown 渲染环境支持 KaTeX/MathJax。

附录速查清单

# 标题
## 二级标题

**粗体** *斜体* ~~删除线~~

> 引用

- 无序列表
1. 有序列表
- [ ] 任务项

`行内代码`

```js
console.log('code block')
```

[链接](https://example.com)
![图片](https://example.com/a.png)

$E=mc^2$

如果你刚开始写博客，建议先按“基础语法 + 实战排版建议”这两节执行，先形成稳定写作模板，再逐步加高级语法。

Telus

Flutter Day02: Image 与 TextField 组件

Flutter Day02: Image 与 TextField 组件

1. Image 组件详解

1.1 常见构造函数（图片来源）

1.2 核心属性

1.3 fit 快速理解

1.4 示例: 常见图片加载与占位

1.5 实战建议

2. TextField 组件详解

2.1 核心属性

2.2 InputDecoration 常见字段

2.3 示例: 登录表单（含焦点切换与基础校验）

2.4 实战建议

Flutter Day03: 常用滚动组件

Flutter Day03 - 常用滚动组件笔记

1. SingleChildScrollView

1.1 组件作用

1.2 适用场景

1.3 特点

1.4 代码引用（你的示例）

1.5 关键点总结

1.6 常用属性知识点及应用

2. ListView.builder

2.1 组件作用

2.2 适用场景

2.3 代码引用（你的示例）

2.4 关键参数

2.5 常用属性知识点及应用

3. ListView.separated

3.1 组件作用

3.2 适用场景

3.3 代码引用（你的示例）

3.4 关键参数

3.5 常用属性知识点及应用

4. 三种滚动组件对比

5. 学习小结

Flutter Day04: GridView 与 CustomScrollView

Flutter Day04：GridView 与 CustomScrollView 知识点

1. GridView 组件概述

2. GridView.count 模式（按列数布局）

常用属性

示例代码

3. GridView.extent 模式（按最大宽度布局）

常用属性

示例代码

4. GridView.builder 模式（推荐大数据量）

常用属性

gridDelegate 常见类型

示例代码

5. CustomScrollView 组件概述

轮播图相关状态与属性

SliverPersistentHeader 相关属性

示例代码

6. SliverPersistentHeaderDelegate 吸顶头部

关键方法与属性

示例代码

7. PageView 轮播补充知识点

8. 选型建议

Flutter Day01: 布局与状态管理核心

Flutter 核心知识点笔记

快速导航

布局遵循规则

布局核心规则

一、StatefulWidget 与 setState 状态管理

1. 核心机制

2. 代码中的具体应用

二、Container 容器组件详解

1. 基础布局属性

2. BoxDecoration 装饰器

三、Scaffold 页面骨架组件

1. 常用属性

2. 基础示例

3. 使用建议

四、Align 与 Container 的嵌套关系

1. Align 放在 Container 内部

2. Container 放在 Align 内部

3. 核心区别对比

4. 特殊情况：Container 的 alignment 属性

5. 总结建议

1.3 `fit` 快速理解

1. `Align` 放在 `Container` 内部

2. `Container` 放在 `Align` 内部

4. 特殊情况：`Container` 的 `alignment` 属性

2. 配合组件：`Expanded` 与 `Flexible`

1. `setState` 调用了但界面没更新

2. `Container` 设置了 `decoration` 又设置 `color`

3. `Row` 子项过多出现黄色黑纹溢出

4. 以为 `Container(alignment: ...)` 能移动整个容器

2. 配合组件：`Positioned`

2. `TextStyle` 常用配置