【Flutter 程式設計入門實戰 30 天】Day 12:TextField 文字輸入框元件


【Flutter 程式設計入門實戰 30 天】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

哈囉~大家好,我是 KT ,今天實戰第十二天,KT 將為大家來介紹,如何使用 TextField 文字輸入框元件。

TextField 文字輸入框元件

TextField 文字輸入框元件,提供給用戶輸入文字的元件。

TextField 文字輸入框元件,常用的屬性

  • controller: 監聽文字輸入內容(★最重要★)
  • onChanged:當文字有改變觸發事件
  • onSubmitted:當按下鍵盤Entenr觸發事件
  • enable:是否禁用
  • maxLength:最大長度
  • maxLines:最大行數
  • style:文字輸入框樣式
  • textAlign:文字對齊方式
  • obscureText:設定是否為隱碼,設定為true文字將會被隱碼,false則會顯示明文正常文字內容
  • inputFormatters:設定允許輸入的文字格式
  • decoration:文字輸入框元件裝飾效果

起手式範例

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('HKT線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //↓↓↓更改此處程式碼↓↓↓
    return Center(child: TextField());
  }
}

範例:輸入文字框,顯示提示文字

TextField(
            decoration: InputDecoration(hintText: '請輸入...'),
        )

執行畫面

範例:按鈕按下印出輸入文字框內容

宣告一個 TextEditingController 用來註冊文字框的 controller 來監聽文字輸入框內容,當按鈕按下印出輸入文字框文字內容。
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('HKT線上教室'),
        ),
        body: HomePage(),
      ),
    );
  }
}
class HomePage extends StatelessWidget {
  final TextEditingController myController = new TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          TextField(
            controller: myController,
            decoration: InputDecoration(hintText: '請輸入...'),
          ),
          RaisedButton(
            child: Text('印出輸入框內容'),
            onPressed: btnEvent,
          )
        ],
      ),
    );
  }
  void btnEvent() {
    print(myController.text);
  }
}

執行畫面


那今天就介紹到這邊囉~
順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。
我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/
Background vector created by freepik
https://www.freepik.com

留言

這個網誌中的熱門文章

16天記下7000單字

Costco 好市多 AFTERSHOKZ 骨傳導 藍牙運動耳機 AS650 開箱實測評價與心得

2019 最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄 (7/5 更新囉~)