A brief understanding of the TextField component input box controller property of the basic components of Flutter

A brief understanding of the TextField component input box controller property of the basic components of Flutter

controller

The controller property is used to control the content of the input box, including assigning values ​​to the input box and taking values ​​from the input box. The property value is of type TextEditingController.
insert image description here

Realize the effect:

After clicking the endorsement button, the text entered in the input box will be passed to the position below the input box
1. Create a class that inherits from StatefulWidget

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

2. Create a custom class that inherits from State

class MyState extends State {
    
    
  @override
  String info ='初始化';
  TextEditingController controller=TextEditingController();
  void getvalue(){
    
    
    setState(() {
    
    
      info=controller.text;
    });
  }
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('阿哥所'),
        centerTitle: true,
      ),
      body: Column(
        children: [TextField(controller: controller,), Text(info)],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
    
    
         getvalue();
        },//设置点击事件,点击按钮,将文本值送到下面info
        child: Text('背书'),
      ),
    );
  }
}

3. Call a custom class

import 'dart:ffi';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'yangxdpage.dart';
import 'hougongpage.dart';
import 'suiyuxuan.dart';
import 'denglupage.dart';
import 'agesuopage.dart';
// void main() => runApp(new MyApp());

void main() {
    
    
  return runApp(new MyApp());
}
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      title: '甄嬛传',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      /*开发者需要做的具体工作*/
      home: agesuopage(),
      
      },
    );
  }
}


insert image description here

Guess you like

Origin blog.csdn.net/qq_43336158/article/details/123858398