Flutter入门学习--(19)文本框控件TextField

  文本框控件在Flutter中使用的TextField，下面我们看下怎样使用，效果图如下

 

  

首先new TextField 定义一个文本框，如果要获取文本框的内容，首先要定义TextEditingController，然后通过TextField的controller进行绑定

代码如下

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  TextEditingController contentController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter 文本框控件',
        home: Scaffold(
            appBar: AppBar(
              title: Text("FFlutter 文本框控件"),
            ),
            body: new Column(
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(top: 20.0),
                ),
                new Expanded(
                    child: new TextField(
                      controller: contentController,
                  decoration: new InputDecoration(
                      hintText: "请输入内容",
                      hintStyle: new TextStyle(color: const Color(0xFF808080)),
                      border: new OutlineInputBorder(
                          borderRadius: const BorderRadius.all(
                              const Radius.circular(6.0))),
                      contentPadding: const EdgeInsets.all(10.0)),
                )),
                Container(
                    margin: EdgeInsets.only(top: 20.0),
                    child: RaisedButton(
                     
                      onPressed: () {
                         print({'内容': contentController.text});
                      },
                      child: Text("确定"),
                      textColor: Color(0xffff0000),
                      color: Colors.green,
                      highlightColor: Color(0xff00ff00),
                    )),
              ],
            )));
  }
}