在Flutter中,可以通过使用TextEditingController来创建一个新的文本字段,并将其值与前一个文本字段的值一起显示。TextEditingController是一个控制文本字段的控制器,它可以监听文本字段的变化并获取其值。
以下是一个示例代码,演示如何实现这个功能:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
final TextEditingController _controller1 = TextEditingController();
final TextEditingController _controller2 = TextEditingController();
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Text Fields'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller1,
decoration: InputDecoration(
labelText: 'Field 1',
),
),
SizedBox(height: 10),
TextField(
controller: _controller2,
decoration: InputDecoration(
labelText: 'Field 2',
),
),
SizedBox(height: 10),
Text(
'Field 1: ${_controller1.text}\nField 2: ${_controller2.text}',
style: TextStyle(fontSize: 16),
),
],
),
),
),
);
}
}
在这个示例中,我们创建了两个文本字段(TextField),分别使用了_controller1和_controller2作为它们的控制器。在Text组件中,我们使用了${_controller1.text}
和${_controller2.text}
来获取文本字段的值,并将它们与"Field 1: "和"Field 2: "一起显示出来。
这个功能在需要获取用户输入并将其显示在界面上的场景中非常有用,比如登录页面、表单提交等。
推荐的腾讯云相关产品:腾讯云移动直播(https://cloud.tencent.com/product/mlvb)可以用于实时音视频的云端处理和传输。
领取专属 10元无门槛券
手把手带您无忧上云