Flutter控件归纳总结-EW帮帮网

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

一、基础布局控件

Container
- 通用容器：支持装饰（颜色、边框、阴影）、内外边距、尺寸约束。
- 示例：Container(color: Colors.blue, padding: EdgeInsets.all(16))
Row / Column
- 线性布局：水平（Row）或垂直（Column）排列子控件。
- 关键属性：mainAxisAlignment（主轴对齐）、crossAxisAlignment（交叉轴对齐）。
- 子控件常用：Expanded（按比例填充剩余空间）、Flexible（灵活伸缩）。
Stack
- 层叠布局：子控件重叠（如文字+图片）。
- 配合 Positioned 定位：Positioned(top: 10, left: 20, child: ...)
ListView
- 滚动列表：
  - ListView(children: [...]) （静态列表）
  - ListView.builder() （动态懒加载，大数据集首选）
GridView
- 网格布局：
  - GridView.count(crossAxisCount: 2) （固定列数）
  - GridView.builder() （动态构建）

二、常用功能控件

文本显示
- Text("Hello", style: TextStyle(fontSize: 20))
- RichText：混合样式文本。
图片
- Image.asset("assets/logo.png") （本地资源）
- Image.network("https://...") （网络图片）
按钮
- ElevatedButton：凸起按钮（主操作）
- TextButton：文本按钮（次要操作）
- IconButton：图标按钮（工具栏）
- FloatingActionButton：悬浮动作按钮（FAB）
输入控件
- TextField：文本输入框
- Checkbox / Switch：勾选框/开关
- Radio / Slider：单选按钮/滑块
对话框
- AlertDialog：提示对话框
- showModalBottomSheet：底部弹窗

三、导航与路由

页面导航

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

命名路由

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

四、状态管理控件

有状态组件
- StatefulWidget + setState()：局部状态刷新。
- 示例：计数器应用。
状态管理方案（进阶）
- Provider：官方推荐，依赖注入。
- Bloc / Riverpod：响应式状态管理。
- ValueListenableBuilder：监听值变化局部刷新。

五、Material & Cupertino 风格控件

Material Design (Android)
- Scaffold：页面骨架（AppBar、Drawer、BottomNavigationBar）。
- AppBar：顶部导航栏。
- BottomNavigationBar：底部导航。
- Card：卡片容器。
Cupertino (iOS)
- CupertinoApp / CupertinoPageScaffold
- CupertinoButton / CupertinoTextField
- CupertinoPicker：iOS风格选择器。

六、动画与高级控件

隐式动画
- AnimatedContainer：自动过渡的容器。
- AnimatedOpacity：透明度渐变。
显式动画
- AnimationController：控制动画周期。
- Tween：定义动画值范围。
- AnimatedBuilder：自定义动画构建。
高级组件
- FutureBuilder：异步数据加载（如API请求）。
- StreamBuilder：实时数据流（如WebSocket）。
- Hero：页面间共享元素动画。

七、自定义控件

组合现有控件

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

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

八、性能优化控件

const 构造函数
- 减少重建：const Text("Static")。
懒加载控件
- ListView.builder()：仅渲染可见区域。
- FutureBuilder：按需加载数据。
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 {
   
   
  @override
  Widget 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

Flutter控件归纳总结