Flutter计数器应用示例
封面图
•
2025-10-24
•
Flutter
12
0
0
0
下面是一个简单的 **Flutter 计数器应用示例**,使用 Flutter 的 `StatefulWidget` 来实现计数功能。这个应用包含一个按钮,每次点击会增加计数器的值。 --- ### ✅ 示例:Flutter 计数器应用 #### 1. 创建一个新的 Flutter 项目(如果你还没有): ```bash flutter create counter_app cd counter_app ``` #### 2. 替换 `lib/main.dart` 文件内容如下: ```dart import 'package:flutter/material.dart'; void main() { runApp(const CounterApp()); } class CounterApp extends StatelessWidget { const CounterApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Counter', theme: ThemeData( primarySwatch: Colors.blue, ), home: const CounterScreen(), ); } } class CounterScreen extends StatefulWidget { const CounterScreen({super.key}); @override State<CounterScreen> createState() => _CounterScreenState(); } class _CounterScreenState extends State<CounterScreen> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Counter'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text( '你已经点击了:', ), Text( '$_counter', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: const Icon(Icons.add), ), ); } } ``` --- ### 📌 功能说明: - 使用 `StatefulWidget` 来管理状态(计数器的值)。 - `_counter` 是一个整型变量,初始为 0。 - 点击按钮时调用 `_incrementCounter()` 方法,通过 `setState()` 更新 UI。 - `FloatingActionButton` 用于触发计数器递增。 --- ### 🧪 运行应用: 在终端中运行以下命令启动应用: ```bash flutter run ``` 你会看到一个简单的计数器界面,点击右下角的加号按钮来增加计数。 --- 如果你想扩展功能,比如添加减法、重置、显示历史记录等,也可以告诉我,我可以帮你继续开发!
上一篇:
搭建Flutter开发环境
下一篇:
Flutter框架 Widget 简介
标题录入,一次不能超过6条
返回顶部
留言
留言
评论