Flutter计数器应用示例

封面图 • 2025-10-24 • Flutter

下面是一个简单的 **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
```

你会看到一个简单的计数器界面，点击右下角的加号按钮来增加计数。

---

如果你想扩展功能，比如添加减法、重置、显示历史记录等，也可以告诉我，我可以帮你继续开发！