在Flutter中,你可以使用TextField widget来实现文本输入。以下是一个简单的例子,演示如何创建一个包含文本输入框的Flutter应用:
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('Text Input Example'),
        ),
        body: Center(
          child: TextInputWidget(),
        ),
      ),
    );
  }
}

class TextInputWidget extends StatefulWidget {
  @override
  _TextInputWidgetState createState() => _TextInputWidgetState();
}

class _TextInputWidgetState extends State<TextInputWidget> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            controller: _controller,
            decoration: InputDecoration(
              labelText: 'Enter your text',
            ),
          ),
          SizedBox(height: 16.0),
          ElevatedButton(
            onPressed: () {
              // 获取文本框中的文本
              String enteredText = _controller.text;
              // 在控制台输出输入的文本
              print('Entered text: $enteredText');
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    // 在组件销毁时释放控制器
    _controller.dispose();
    super.dispose();
  }
}

在这个例子中,我们创建了一个 TextInputWidget 组件,其中包含一个带有标签的文本输入框 (TextField) 和一个提交按钮 (ElevatedButton)。通过使用 TextEditingController,我们能够获取文本输入框中的文本内容,并在按钮被按下时处理它。

这只是一个基本的例子,你可以根据需要进行定制,例如添加输入验证、密码框、多行文本框等。


转载请注明出处:http://www.zyzy.cn/article/detail/9600/Flutter