Flutter控件归纳总结

Flutter 的控件（Widget）是构建 UI 的基础，分为无状态（StatelessWidget）和有状态（StatefulWidget）两大类。以下是 Flutter 核心控件的系统归纳：

---

一、基础布局控件

1. Container

   • 通用容器：支持装饰（颜色、边框、阴影）、内外边距、尺寸约束。
   • 示例：Container(color: Colors.blue, padding: EdgeInsets.all(16))

2. Row / Column

   • 线性布局：水平（Row）或垂直（Column）排列子控件。
   • 关键属性：mainAxisAlignment（主轴对齐）、crossAxisAlignment（交叉轴对齐）。
   • 子控件常用：Expanded（按比例填充剩余空间）、Flexible（灵活伸缩）。

3. Stack

   • 层叠布局：子控件重叠（如文字+图片）。
   • 配合 Positioned 定位：Positioned(top: 10, left: 20, child: ...)

4. ListView

   • 滚动列表：
     • ListView(children: [...]) （静态列表）
     • ListView.builder() （动态懒加载，大数据集首选）

5. GridView

   • 网格布局：
     • GridView.count(crossAxisCount: 2) （固定列数）
     • GridView.builder() （动态构建）

---

二、常用功能控件

1. 文本显示

   • Text("Hello", style: TextStyle(fontSize: 20))
   • RichText：混合样式文本。

2. 图片

   • Image.asset("assets/logo.png") （本地资源）
   • Image.network("https://...") （网络图片）

3. 按钮

   • ElevatedButton：凸起按钮（主操作）
   • TextButton：文本按钮（次要操作）
   • IconButton：图标按钮（工具栏）
   • FloatingActionButton：悬浮动作按钮（FAB）

4. 输入控件

   • TextField：文本输入框
   • Checkbox / Switch：勾选框/开关
   • Radio / Slider：单选按钮/滑块

5. 对话框

   • AlertDialog：提示对话框
   • showModalBottomSheet：底部弹窗

---

三、导航与路由

1. 页面导航

   Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()));
   Navigator.pop(context); // 返回
   

2. 命名路由

   // 定义路由表
   MaterialApp(routes: {'/home': (context) => HomePage(),'/detail': (context) => DetailPage(),},
   );
   // 跳转
   Navigator.pushNamed(context, '/detail');
   

---

四、状态管理控件

1. 有状态组件

   • StatefulWidget + setState()：局部状态刷新。
   • 示例：计数器应用。

2. 状态管理方案（进阶）

   • Provider：官方推荐，依赖注入。
   • Bloc / Riverpod：响应式状态管理。
   • ValueListenableBuilder：监听值变化局部刷新。

---

五、Material & Cupertino 风格控件

1. Material Design (Android)

   • Scaffold：页面骨架（AppBar、Drawer、BottomNavigationBar）。
   • AppBar：顶部导航栏。
   • BottomNavigationBar：底部导航。
   • Card：卡片容器。

2. Cupertino (iOS)

   • CupertinoApp / CupertinoPageScaffold
   • CupertinoButton / CupertinoTextField
   • CupertinoPicker：iOS风格选择器。

---

六、动画与高级控件

1. 隐式动画

   • AnimatedContainer：自动过渡的容器。
   • AnimatedOpacity：透明度渐变。

2. 显式动画

   • AnimationController：控制动画周期。
   • Tween：定义动画值范围。
   • AnimatedBuilder：自定义动画构建。

3. 高级组件

   • FutureBuilder：异步数据加载（如API请求）。
   • StreamBuilder：实时数据流（如WebSocket）。
   • Hero：页面间共享元素动画。

---

七、自定义控件

1. 组合现有控件

   class CustomButton extends StatelessWidget {Widget build(BuildContext context) {return Container(decoration: BoxDecoration(...),child: Text("Click"),);}
   }
   

2. 自绘控件

   • 继承 CustomPainter，使用 Canvas 绘制图形（如自定义图表）。

---

八、性能优化控件

1. const 构造函数

   • 减少重建：const Text("Static")。

2. 懒加载控件

   • ListView.builder()：仅渲染可见区域。
   • FutureBuilder：按需加载数据。

3. RepaintBoundary

   • 隔离重绘区域，提升性能。

---

完整示例：基础页面结构

class HomePage extends StatelessWidget {Widget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("首页")),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text("Hello Flutter!"),ElevatedButton(onPressed: () => Navigator.pushNamed(context, '/detail'),child: Text("跳转详情"),),],),),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(icon: Icon(Icons.home), ...],),);}
}

---

下面我将为Flutter的核心控件补充完整代码示例，涵盖布局、交互、导航和状态管理等关键场景：
下面我将为Flutter的核心控件补充完整代码示例，涵盖布局、交互、导航和状态管理等关键场景：

1. 基础布局组合示例

class LayoutDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(body: Column(children: [// 顶部导航栏Container(height: 60,color: Colors.blue,child: Row(children: [IconButton(icon: Icon(Icons.menu), onPressed: () {}),Text('布局示例', style: TextStyle(color: Colors.white)),],),),// 内容区域Expanded(child: ListView(children: [// 网格布局GridView.count(shrinkWrap: true,physics: NeverScrollableScrollPhysics(),crossAxisCount: 3,children: List.generate(9, (index) {return Container(margin: EdgeInsets.all(8),color: Colors.amber[100 * (index % 9)],child: Center(child: Text('Item $index')),);}),),// 层叠布局Stack(alignment: Alignment.center,children: [Container(height: 200, color: Colors.green),Positioned(bottom: 20,child: Card(elevation: 8,child: Padding(padding: E