浅识Flutter 基本组件之TextField组件 输入框controller属性

浅识Flutter 基本组件之TextField组件 输入框controller属性

controller

controller属性用于控制输入框中的内容,包括向输入框中赋值和从输人框中取值。该属性值为TextEditingController类型.
在这里插入图片描述

实现效果:

点击背书按钮后,会将输入框输入的文字,传到输入框下方位置
1、创建继承自StatefulWidget的类

class agesuopage extends StatefulWidget {
   
  @override
  State<StatefulWidget> createState() {
   
    return MyState();
  }
}

2、创建继承自State的自定义类

class MyState extends State {
   
  @override
  String info ='初始化';
  TextEditingController controller
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,可以通过 `GridView` 和 `Card` 实现一个两行两列输入框组件,每个输入框都带有标题。以下是实现的代码示例: ``` import 'package:flutter/material.dart'; class TwoByTwoInput extends StatelessWidget { final List<String> titles; final List<TextEditingController> controllers; TwoByTwoInput({required this.titles, required this.controllers}); @override Widget build(BuildContext context) { return GridView.count( crossAxisCount: 2, children: List.generate(4, (index) { return Card( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( titles[index], style: TextStyle(fontWeight: FontWeight.bold), ), SizedBox(height: 8), TextField( controller: controllers[index], decoration: InputDecoration( hintText: 'Enter ${titles[index]}', border: OutlineInputBorder(), ), ), ], ), ), ); }), ); } } ``` 在使用时,需要提供两个参数:`titles` 和 `controllers`。`titles` 是一个包含四个字符串的列表,分别对应四个输入框的标题;`controllers` 是一个包含四个 `TextEditingController` 对象的列表,分别对应四个输入框的文本控制器。 示例用法: ``` class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { final List<String> titles = ['Title 1', 'Title 2', 'Title 3', 'Title 4']; final List<TextEditingController> controllers = [ TextEditingController(), TextEditingController(), TextEditingController(), TextEditingController(), ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Two by Two Input'), ), body: Center( child: TwoByTwoInput(titles: titles, controllers: controllers), ), ); } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值