美文网首页
flutter 输入框

flutter 输入框

作者: CaptainRoy | 来源:发表于2019-10-10 19:09 被阅读0次
    输入框
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("按钮列表"),
            ),
            body: MyHomeBody(),
          ),
        );
      }
    }
    
    class MyHomeBody extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return HomeContent();
      }
    }
    
    class HomeContent extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Container(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextFieldDemo(),
            ],
          ),
        );
      }
    }
    
    class TextFieldDemo extends StatefulWidget {
      TextFieldDemoState createState() => TextFieldDemoState();
    }
    
    class TextFieldDemoState extends State<TextFieldDemo> {
      final textEditingController = TextEditingController();
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
    
        // 设置默认值
        textEditingController.text = "Hello World";
    
        // 监听 文本框
        textEditingController.addListener(() {
          print("textEditingController: ${textEditingController.text}");
        });
      }
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return TextField(
          controller: textEditingController,
          decoration: InputDecoration(
            icon: Icon(Icons.people),
            labelText: "用户名",
            hintText: "请输入用户名",
            border: InputBorder.none,
            filled: true,
            fillColor: Colors.lightGreen,
          ),
          onChanged: (value) {
            print("onChanged: $value");
          },
          onSubmitted: (value) {
            print("onSubmitted: $value");
          },
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:flutter 输入框

          本文链接:https://www.haomeiwen.com/subject/duwapctx.html