html的div+class布局在flutter中需按语义选container/column/row/stack等容器，并将css类拆解为具体属性；flex对齐用mainaxisalignment/crossaxisalignment；图片分assetimage/networkimage；表单需手动绑定控制器与状态管理。
HTML的div+class布局怎么对应到Flutter Widget
Flutter里没有
div）通常对应Container、Column、Row或Stack，而“class”控制的样式要拆解成具体属性——不是复用一个类名，而是把margin、padding、backgroundColor等写进Widget构造参数里。常见错误现象：
— 把整个页面塞进一个Container，结果内容不居中、不滚动、文字溢出；
— 用Text硬套HTML里的<span class="highlight">xxx</span>，但没包RichText或没设style，字体颜色/大小全失效。
- 优先按语义选容器：
div包裹标题+列表 → 用Column；横向导航栏 →Row；带遮罩的弹层 →Stack+Positioned - CSS class里的
margin: 10px→margin: EdgeInsets.all(10)；text-align: center→ 给Text加textAlign: TextAlign.center - 别在
Container里堆砌所有样式；拆开：布局逻辑放Row/Column，视觉样式放Container或DecoratedBox
Flex布局（display:flex）在Flutter里怎么写
HTML里靠display: flex + justify-content / align-items实现对齐，Flutter用Row和Column的mainAxisAlignment与crossAxisAlignment参数替代，但默认行为不同——HTML的flex容器默认flex-direction: row且子项不换行，Flutter的Row默认不换行，但Column会撑满高度，容易导致溢出。
使用场景：按钮组右对齐、头像+文字水平居中、卡片内图标垂直居中。
-
justify-content: space-between→mainAxisAlignment: MainAxisAlignment.spaceBetween -
align-items: center→crossAxisAlignment: CrossAxisAlignment.center - 注意：Flutter的
Row默认主轴是水平，Column是垂直；想让Column内的子项水平居中，必须显式写crossAxisAlignment: CrossAxisAlignment.center，不会继承父级对齐 - Flex item的
flex: 1对应ExpandedWidget；单纯想占剩余空间？别只用Flexible，得包在Row/Column里，否则报错RenderFlex children have non-zero flex but incoming height constraints are unbounded
HTML图片（img标签）和背景图怎么转成Flutter
<img src="logo.png">看着简单，但在Flutter里路径、加载方式、缩放行为全不一样。最常踩的坑是：图片显示为黑框、拉伸变形、或者根本加载不出来。
关键差异：
— HTML自动处理相对路径和CDN地址；Flutter需区分AssetImage（本地资源）和NetworkImage（网络图）；
— CSS里的background-size: cover没有直接对应，得靠BoxFit.cover + DecorationImage组合。
- 本地图片必须先在
pubspec.yaml里声明：flutter: assets: - assets/images/logo.png，否则运行时报Unable to load asset -
Image.network('https://...')默认不支持HTTPS证书校验失败的旧域名，遇到白屏要加errorBuilder兜底 - 想实现
background-image效果？别用ImageWidget，改用Container的decoration属性：decoration: BoxDecoration(image: DecorationImage(image: AssetImage('assets/bg.jpg'), fit: BoxFit.cover)) - SVG支持有限：Flutter官方
flutter_svg包能渲染基础SVG，但不支持CSS样式注入或<use></use>引用，复杂图标建议导出为PNG
表单元素（input/select）如何映射到Flutter控件
HTML的<input type="text">、<select></select>在Flutter里不是“替换标签”就能完事。它们本质是状态驱动的Widget，需要手动绑定TextEditingController、处理焦点、响应键盘事件，而且原生平台行为（比如iOS键盘收起逻辑）必须显式干预。
容易被忽略的点：
— 没有onchange回调，只有onChanged（输入时触发）和onSubmitted（回车/搜索键触发）；
— DropdownButton的选项必须提前定义好items列表，不能像HTML那样动态appendChild。
- 文本输入：用
TextField，必须配TextEditingController来读写值；别直接用onChanged: (v) => print(v)做业务逻辑，状态更新要走setState或状态管理 - 下拉选择：
DropdownButton本身不带搜索框，如需搜索功能得换DropdownSearch第三方包，或自己组合PopupMenuButton+TextField - 单选/复选：
RadioListTile和CheckboxListTile自带文字和对齐，比裸用Radio更贴近HTML的<input type="radio">体验 - 键盘收起：点击空白处不自动收键盘，得给外层加
GestureDetector监听onTap，然后调用FocusScope.of(context).unfocus()
迁移时最麻烦的从来不是“哪个Widget对应哪个标签”，而是HTML里隐式的行为（比如自动聚焦、回车提交、空格触发checkbox）在Flutter里全部变成显式代码。少写一行FocusNode或漏掉一个setState，界面就卡住不动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
