Flutter 常用控件大全：从入门到实战，全面掌握 UI 开发

发布于：2025-03-15 ⋅ 阅读:(17) ⋅ 点赞:(0)

本文详细整理了 Flutter 中 50+ 常用控件，涵盖文本、布局、按钮、列表、动画等核心组件。每个控件均附有 属性说明 和 实战代码示例，帮助你快速掌握 Flutter UI 开发的精髓。无论你是初学者还是进阶开发者，本文都能为你提供实用的参考和指导，助你轻松构建美观、高效的 Flutter 应用！

1. Text

用于显示文本内容。

属性：

  • text: 显示的文本内容。
  • style: 文本样式（字体大小、颜色、粗细等）。

示例：

Text(
  'Hello, Flutter!',
  style: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)

2. Container

用于布局和装饰，可以设置宽度、高度、边距、背景色等。

属性：

  • width 和 height: 容器的宽度和高度。
  • margin 和 padding: 外边距和内边距。
  • decoration: 装饰（背景色、边框、圆角等）。

示例：

Container(
  width: 200,
  height: 100,
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Text('Container'),
)

3. Row 和 Column

用于水平（Row）和垂直（Column）排列子控件。

属性：

  • mainAxisAlignment: 主轴对齐方式（如 MainAxisAlignment.spaceEvenly）。
  • crossAxisAlignment: 交叉轴对齐方式（如 CrossAxisAlignment.start）。

示例：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)

4. ListView

用于显示可滚动的列表。

属性：

  • children: 列表项。
  • scrollDirection: 滚动方向（默认垂直）。

示例：

ListView(
  children: [
    ListTile(
      title: Text('Item 1'),
    ),
    ListTile(
      title: Text('Item 2'),
    ),
    ListTile(
      title: Text('Item 3'),
    ),
  ],
)

5. GridView

用于显示网格布局。

属性：

  • crossAxisCount: 每行的列数。
  • children: 网格项。

示例：

GridView.count(
  crossAxisCount: 2,
  children: List.generate(10, (index) {
    return Center(
      child: Text('Item $index'),
    );
  }),
)

6. Button

用于触发操作，如 ElevatedButton、TextButton、IconButton 等。

属性：

  • onPressed: 点击事件回调。
  • child: 按钮内容。

示例：

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  child: Text('Click Me'),
)

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {
    print('Icon Button Pressed');
  },
)

7. TextField

用于接收用户输入。

属性：

  • decoration: 输入框装饰（如标签、边框）。
  • onChanged: 输入内容变化时的回调。

示例：

TextField(
  decoration: InputDecoration(
    labelText: 'Enter your name',
    border: OutlineInputBorder(),
  ),
  onChanged: (text) {
    print('User input: $text');
  },
)

8. Image

用于显示图片。

属性：

  • src: 图片路径（网络或本地）。
  • width 和 height: 图片尺寸。
  • fit: 图片填充方式（如 BoxFit.cover）。

示例：

Image.network(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

9. AppBar

用于显示应用栏。

属性：

  • title: 标题。
  • actions: 右侧操作按钮。

示例：

Scaffold(
  appBar: AppBar(
    title: Text('My App'),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {
          print('Search');
        },
      ),
    ],
  ),
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
)

10. BottomNavigationBar

用于底部导航栏。

属性：

  • items: 导航项。
  • currentIndex: 当前选中的索引。
  • onTap: 点击事件回调。

示例：

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        label: 'Business',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        label: 'School',
      ),
    ],
    currentIndex: 0,
    onTap: (index) {
      print('Selected index: $index');
    },
  ),
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
)

11. SnackBar

用于显示轻量级的提示信息。

属性：

  • content: 提示内容。
  • duration: 显示时长。

示例：

Scaffold(
  body: Center(
    child: ElevatedButton(
      onPressed: () {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('This is a SnackBar!'),
          ),
        );
      },
      child: Text('Show SnackBar'),
    ),
  ),
)

12. AlertDialog

用于显示对话框。

属性：

  • title: 对话框标题。
  • content: 对话框内容。
  • actions: 操作按钮。

示例：

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Alert'),
      content: Text('This is an alert dialog.'),
      actions: [
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('OK'),
        ),
      ],
    );
  },
);

13. Stack

用于将多个控件叠加在一起。

属性：

  • children: 子控件。

示例：

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

14. Expanded

用于在 Row 或 Column 中扩展子控件。

属性：

  • flex: 扩展比例。

示例：

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Expanded(
      flex: 1,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

15. FutureBuilder

用于处理异步数据并构建 UI。

属性：

  • future: 异步任务。
  • builder: 根据任务状态构建 UI。

示例：

FutureBuilder<String>(
  future: fetchData(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Data: ${snapshot.data}');
    }
  },
)

16. StreamBuilder

用于处理流数据并构建 UI。

属性：

  • stream: 数据流。
  • builder: 根据流数据构建 UI。

示例：

StreamBuilder<int>(
  stream: streamCounter(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text('Count: ${snapshot.data}');
    } else {
      return Text('No data');
    }
  },
)

17. GestureDetector

用于处理手势事件。

属性：

  • onTap: 点击事件回调。
  • child: 子控件。

示例：

GestureDetector(
  onTap: () {
    print('Tapped');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
    child: Center(
      child: Text('Tap Me'),
    ),
  ),
)

18. Hero

用于实现页面之间的共享元素过渡动画。

属性：

  • tag: 共享元素的唯一标识。
  • child: 共享元素的内容。

示例：

Hero(
  tag: 'hero-tag',
  child: Image.network(
    'https://example.com/image.jpg',
    width: 100,
    height: 100,
  ),
)

19. AnimatedContainer

用于创建带有动画效果的容器。

属性：

  • duration: 动画时长。
  • width 和 height: 容器的宽度和高度。
  • color: 背景色。

示例：

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _width,
  height: _height,
  color: _color,
  child: Center(
    child: Text('Animated Container'),
  ),
)

20. CustomPaint

用于自定义绘制。

属性：

  • painter: 自定义绘制逻辑。

示例：

CustomPaint(
  size: Size(200, 200),
  painter: MyCustomPainter(),
)

21. ClipRRect

用于裁剪控件为圆角矩形。

属性：

  • borderRadius: 圆角半径。
  • child: 子控件。

示例：

ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: Image.network(
    'https://example.com/image.jpg',
    width: 200,
    height: 200,
    fit: BoxFit.cover,
  ),
)

22. Transform

用于对控件进行变换（旋转、缩放、平移等）。

属性：

  • angle: 旋转角度。
  • child: 子控件。

示例：

Transform.rotate(
  angle: 45 * (3.141592653589793 / 180),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

23. Flexible

用于在 Row 或 Column 中灵活分配空间。

属性：

  • flex: 扩展比例。
  • child: 子控件。

示例：

Row(
  children: [
    Flexible(
      flex: 1,
      child: Container(
        color: Colors.red,
        height: 100,
      ),
    ),
    Flexible(
      flex: 2,
      child: Container(
        color: Colors.blue,
        height: 100,
      ),
    ),
  ],
)

24. Spacer

用于在 Row 或 Column 中创建空白空间。

属性：

  • flex: 空白空间的比例。

示例：

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

25. Divider

用于添加分割线。

属性：

  • height: 分割线高度。
  • color: 分割线颜色。

示例：

Column(
  children: [
    Text('Item 1'),
    Divider(),
    Text('Item 2'),
  ],
)

26. CircularProgressIndicator

用于显示加载指示器。

属性：

  • valueColor: 进度条颜色。

示例：

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

27. LinearProgressIndicator

用于显示线性进度条。

属性：

  • value: 进度值（0 到 1 之间）。
  • valueColor: 进度条颜色。

示例：

LinearProgressIndicator(
  value: 0.5,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
)

28. Checkbox

用于选择或取消选择选项。

属性：

  • value: 是否选中。
  • onChanged: 状态变化回调。

示例：

Checkbox(
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = value!;
    });
  },
)

29. Radio

用于单选选项。

属性：

  • value: 单选值。
  • groupValue: 当前选中的值。
  • onChanged: 状态变化回调。

示例：

Radio(
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value!;
    });
  },
)

30. Switch

用于切换开关状态。

属性：

  • value: 开关状态。
  • onChanged: 状态变化回调。

示例：

Switch(
  value: _isSwitched,
  onChanged: (value) {
    setState(() {
      _isSwitched = value;
    });
  },
)

31. Slider

用于选择范围内的值。

属性：

  • value: 当前值。
  • min 和 max: 最小值和最大值。
  • onChanged: 值变化回调。

示例：

Slider(
  value: _sliderValue,
  min: 0,
  max: 100,
  onChanged: (value) {
    setState(() {
      _sliderValue = value;
    });
  },
)

32. DatePicker

用于选择日期。

属性：

  • initialDate: 初始���期。
  • firstDate 和 lastDate: 可选日期范围。

示例：

showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
).then((selectedDate) {
  if (selectedDate != null) {
    print('Selected Date: $selectedDate');
  }
});

33. TimePicker

用于选择时间。

属性：

  • initialTime: 初始时间。

示例：

showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
).then((selectedTime) {
  if (selectedTime != null) {
    print('Selected Time: $selectedTime');
  }
});

34. Drawer

用于显示侧边栏。

属性：

  • child: 侧边栏内容。

示例：

Scaffold(
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('Drawer Header'),
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            print('Item 1 tapped');
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            print('Item 2 tapped');
          },
        ),
      ],
    ),
  ),
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
)

35. TabBar

用于显示标签栏。

属性：

  • tabs: 标签项。
  • controller: 标签控制器。

示例：

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.home)),
          Tab(icon: Icon(Icons.business)),
          Tab(icon: Icon(Icons.school)),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        Center(child: Text('Home')),
        Center(child: Text('Business')),
        Center(child: Text('School')),
      ],
    ),
  ),
)

36. Stepper

用于显示步骤指示器。

属性：

  • currentStep: 当前步骤。
  • steps: 步骤列表。

示例：

Stepper(
  currentStep: _currentStep,
  onStepContinue: () {
    setState(() {
      if (_currentStep < 2) {
        _currentStep += 1;
      }
    });
  },
  onStepCancel: () {
    setState(() {
      if (_currentStep > 0) {
        _currentStep -= 1;
      }
    });
  },
  steps: [
    Step(
      title: Text('Step 1'),
      content: Text('Content for Step 1'),
    ),
    Step(
      title: Text('Step 2'),
      content: Text('Content for Step 2'),
    ),
    Step(
      title: Text('Step 3'),
      content: Text('Content for Step 3'),
    ),
  ],
)

37. Chip

用于显示标签或选择项。

属性：

  • label: 标签内容。
  • onDeleted: 删除回调。

示例：

Chip(
  label: Text('Chip'),
  onDeleted: () {
    print('Chip deleted');
  },
)

38. Tooltip

用于显示提示信息。

属性：

  • message: 提示信息内容。
  • child: 子控件。

示例：

Tooltip(
  message: 'This is a tooltip',
  child: Text('Hover over me'),
)

39. RichText

用于显示富文本。

属性：

  • text: 富文本内容（使用 TextSpan 定义）。

示例：

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

40. Wrap

用于自动换行的布局。

属性：

  • spacing: 子控件之间的间距。
  • runSpacing: 行之间的间距。
  • children: 子控件。

示例：

Wrap(
  spacing: 8.0,
  runSpacing: 4.0,
  children: List.generate(10, (index) {
    return Chip(
      label: Text('Item $index'),
    );
  }),
)

41. FadeInImage

用于显示带有淡入效果的图片。

属性：

  • placeholder: 占位图。
  • image: 目标图片。
  • fit: 图片填充方式。

示例：

FadeInImage.assetNetwork(
  placeholder: 'assets/placeholder.png',
  image: 'https://example.com/image.jpg',
  width: 200,
  height: 200,
  fit: BoxFit.cover,
)

42. PageView

用于显示可滑动的页面。

属性：

  • children: 页面内容。

示例：

PageView(
  children: [
    Center(child: Text('Page 1')),
    Center(child: Text('Page 2')),
    Center(child: Text('Page 3')),
  ],
)

43. RefreshIndicator

用于下拉刷新。

属性：

  • onRefresh: 刷新回调。
  • child: 子控件。

示例：

RefreshIndicator(
  onRefresh: () async {
    await Future.delayed(Duration(seconds: 2));
  },
  child: ListView(
    children: [
      ListTile(
        title: Text('Item 1'),
      ),
      ListTile(
        title: Text('Item 2'),
      ),
      ListTile(
        title: Text('Item 3'),
      ),
    ],
  ),
)

44. ClipOval

用于裁剪控件为圆形。

属性：

  • child: 子控件。

示例：

ClipOval(
  child: Image.network(
    'https://example.com/image.jpg',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
)

45. ClipPath

用于自定义裁剪路径。

属性：

  • clipper: 自定义裁剪逻辑。
  • child: 子控件。

示例：

ClipPath(
  clipper: MyCustomClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

46. BackdropFilter

用于应用背景滤镜。

属性：

  • filter: 滤镜效果（如模糊）。
  • child: 子控件。

示例：

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: Container(
    color: Colors.black.withOpacity(0.5),
  ),
)

47. ShaderMask

用于应用着色器遮罩。

属性：

  • shaderCallback: 着色器逻辑。
  • child: 子控件。

示例：

ShaderMask(
  shaderCallback: (Rect bounds) {
    return LinearGradient(
      colors: [Colors.red, Colors.blue],
    ).createShader(bounds);
  },
  child: Text(
    'Shader Mask',
    style: TextStyle(fontSize: 24, color: Colors.white),
  ),
)

48. AnimatedOpacity

用于创建带有动画效果的透明度变化。

属性：

  • opacity: 透明度值（0 到 1 之间）。
  • duration: 动画时长。
  • child: 子控件。

示例：

AnimatedOpacity(
  opacity: _opacity,
  duration: Duration(seconds: 1),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

49. AnimatedCrossFade

用于在两个控件之间创建交叉淡入淡出动画。

属性：

  • duration: 动画时长。
  • firstChild 和 secondChild: 两个子控件。
  • crossFadeState: 当前显示的控件。

示例：

AnimatedCrossFade(
  duration: Duration(seconds: 1),
  firstChild: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
  secondChild: Container(
    width: 200,
    height: 200,
    color: Colors.red,
  ),
  crossFadeState: _showFirst ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)

50. AnimatedBuilder

用于创建自定义动画。

属性：

  • animation: 动画控制器。
  • builder: 构建动画逻辑。
  • child: 子控件。

示例：

AnimatedBuilder(
  animation: _animationController,
  builder: (context, child) {
    return Transform.rotate(
      angle: _animationController.value * 2 * 3.141592653589793,
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

总结

以上是 Flutter 中 50 个常用控件的详细说明和示例代码。通过灵活组合这些控件，你可以构建出功能丰富、界面美观的 Flutter 应用。希望这些内容对你有帮助！如果有其他问题，欢迎随时提问！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布