1. 页面结构类（Scaffold、AppBar、导航）
| Widget | 用途 | 示例 |
|---|---|---|
| Scaffold | 提供页面基础结构（AppBar、Body、Drawer、BottomNavigationBar、FAB） | Scaffold(appBar: AppBar(title: Text(“首页”)), body: Text(“内容”)) |
| AppBar | 页面顶部导航栏，支持标题、按钮、搜索框等 | AppBar(title: Text(“标题”), actions: [IconButton(icon: Icon(Icons.search), onPressed: (){})]) |
| Drawer | 左侧抽屉菜单 | Scaffold(drawer: Drawer(child: ListView(children: [Text(“菜单”)])) ) |
| BottomNavigationBar | 底部导航切换 | BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), label:“首页”)]) |
2. 布局类（Row、Column、Stack、Flex）
| Widget | 用途 | 示例 |
|---|---|---|
| Row | 水平布局（类似 CSS flex-direction: row） | Row(children:[Icon(Icons.star), Text(“评分”)]) |
| Column | 垂直布局（类似 flex-direction: column） | Column(children:[Text(“标题”), Text(“内容”)]) |
| Stack | 叠层布局（类似 position: absolute） | Stack(children:[Image.asset(“bg.png”), Text(“覆盖文字”)]) |
| Expanded | 占满剩余空间 | Row(children:[Expanded(child: Text(“内容”)), Icon(Icons.more)]) |
| SizedBox | 设置固定宽高 / 间距 | Size |
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
