Phản hồi khi nhập

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 23 trên 34.

Một trường có thể báo cho bạn mỗi khi văn bản trong đó thay đổi. Thêm cho trường onChanged:, một hàm nhận toàn bộ văn bản hiện tại:

TextField(
  onChanged: (String value) {
    print(value);
  },
)

Nhập Ada và hàm này in ra ba lần: A, Ad, Ada. (String value) là một tham số (parameter), giống như các tham số trong Functions With Parameters: trường gọi hàm của bạn và truyền văn bản trong đó vào.

Để hiển thị văn bản ở nơi khác trên màn hình, hãy lưu nó trong State và thay đổi nó bằng setState, giống như cách một nút thay đổi số đếm:

onChanged: (String value) {
  setState(() {
    _name = value;
  });
},

Thử thách

Dễ

Hãy để lời chào thay đổi theo nội dung trong trường: khi bạn nhập tên, Hello, stranger! sẽ đổi thành Hello, Ada!. Lưu văn bản vào _name từ onChanged.

Tự làm thử

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String _name = 'stranger';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Greeter')),
      body: Padding(
        padding: const EdgeInsets.all(24),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            TextField(
              decoration: const InputDecoration(
                labelText: 'Your name',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            Text('Hello, $_name!', style: const TextStyle(fontSize: 24)),
          ],
        ),
      ),
    );
  }
}