flutter中的表單使用

Flutter 中常見的表單有 TextField 單行文本框，TextField 多行文本框、CheckBox、Radio、Switch、CheckboxListTile、RadioListTile、SwitchListTile、Slide. 

TextField 文本框組件

常用屬性：

• maxLines ：設置此參數可以把文本框改為多行文本框
• onChanged： 文本框改變的時候觸發的事件
• decoration：hintText 類似 html 中的 placeholder ；border 配置文本框邊框 OutlineInputBorder 配合使用 ；labelText lable 的名稱 ；labelStyle 配置 lable 的樣式 
• obscureText ：把文本框框改為密碼框
• controller ：controller 結合 TextEditingController()可以配置表單默認顯示的內容

首先需要注意的是，因為表單就會涉及到表單值得改變，因此，需要使用StatefulWidget：

import 'package:flutter/material.dart';

void main(){ runApp(MyApp());}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        body: TextFieldDemoPage(),
      )
    );
  }
}

class TextFieldDemoPage extends StatefulWidget {
  TextFieldDemoPage({Key key}) : super(key: key);
  _TextFieldDemoPageState createState() => _TextFieldDemoPageState();
}

class _TextFieldDemoPageState extends State<TextFieldDemoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('表單演示頁面'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child:Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                hintText: "請輸入用戶名"
              ),
            ),
          ],
        ) ,     
      )
    );
  }
}

上面實現了TextField的簡單使用。然后，我們還可以結合上面的常用屬性，實現一些其他的功能和樣式：

   

 

代碼下載：點這里（提取碼：ud89）

 

 

 獲取TextField 文本框內容