Flutter 添加交互

概述

在本章节中，我们将探讨如何为 Flutter 应用添加交互。这包括响应用户输入、处理事件、使用回调函数以及使用 Stateful 和 Stateless 组件来管理状态。

用户输入

文本输入

文本输入通常用于获取用户的文本输入。我们可以使用 TextField 或 TextFormField 小部件来实现这一功能。

示例代码

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('文本输入示例')),
        body: Center(
          child: TextField(
            decoration: InputDecoration(hintText: '请输入文字'),
            onChanged: (text) {
              print(text);
            },
          ),
        ),
      ),
    );
  }
}

在这个例子中，每当用户在文本框中输入新的字符时，都会触发 onChanged 回调函数，并将当前输入的文本打印到控制台。

按钮点击

按钮是应用中最常见的交互元素之一。我们可以通过 onPressed 回调函数来处理按钮点击事件。

示例代码

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('按钮点击示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('按钮被点击了');
            },
            child: Text('点击我'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，当用户点击按钮时，会在控制台上打印出一条消息。

使用回调函数

回调函数是一种常用的处理用户交互的方法。通过定义一个回调函数并将其传递给小部件，可以在特定事件发生时执行相应的操作。

示例代码

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('回调函数示例')),
        body: Center(
          child: MyButton(onPressed: () {
            print('回调函数被调用了');
          }),
        ),
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final VoidCallback onPressed;

  MyButton({required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text('点击我'),
    );
  }
}

在这个例子中，我们创建了一个自定义的 MyButton 小部件，它接收一个 VoidCallback 类型的回调函数。当用户点击这个按钮时，会触发传入的回调函数。

状态管理

在 Flutter 中，状态管理是一个重要的话题。根据应用的需求，我们可以选择不同的状态管理策略。对于简单的交互，我们可以使用 StatefulWidget 来管理组件的状态。

StatefulWidget 示例

让我们来看一个简单的 StatefulWidget 示例，该示例展示了一个可以增加和减少数值的计数器。

示例代码

// www.javascriptcn.com code example
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('计数器示例')),
        body: CounterWidget(),
      ),
    );
  }
}

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  void _decrementCounter() {
    setState(() {
      if (_counter > 0) _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          '你按下了按钮 $_counter 次：',
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _decrementCounter,
              child: Icon(Icons.remove),
            ),
            SizedBox(width: 16),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Icon(Icons.add),
            ),
          ],
        ),
      ],
    );
  }
}

在这个例子中，我们创建了一个 CounterWidget 小部件，它包含一个计数器和两个按钮（加号和减号）。每次点击加号或减号按钮时，计数器的值都会相应地增加或减少。为了实现这一点，我们使用了 setState 方法来更新组件的状态。

总结

通过本章的学习，我们掌握了如何为 Flutter 应用添加基本的交互功能。这些基础知识将帮助你在构建更复杂的交互逻辑时更加得心应手。接下来，你可以尝试结合更多的 Flutter 小部件和更复杂的状态管理策略来创建功能丰富的应用。