7.Flutter文本框的基本使用

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
      home: Scaffold(body: HomePage())
    ));
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding:EdgeInsets.all(20),
      child: Column(children: <Widget>[
        SizedBox(height:30),
        TextField(),
        SizedBox(height:30),
        TextField(
          decoration:InputDecoration(
            hintText: '请输入文本',
            border:OutlineInputBorder()
          ),
        ),
        SizedBox(height:30),
        TextField(
          maxLines: 4,
          decoration:InputDecoration(
            hintText: '多行文本框',
            border:OutlineInputBorder()
          )
        ),
        SizedBox(height:30),
        TextField(
          decoration:InputDecoration(
            labelText: '用户名',
            border:OutlineInputBorder()
          )
        ),
        SizedBox(height:30),
        TextField(
          obscureText: true,
          decoration:InputDecoration(
            labelText: '密码',
            border:OutlineInputBorder()
          )
        ),
    ]),
    );
  }
}

效果预览：

Simulator Screen Shot - iPhone 11 Pro Max - 2020-03-06 at 00.39.13.png