【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 Column(
      children: <Widget>[
        TextField(
          controller: myController,
          decoration: InputDecoration(hintText: '請輸入...'),
        ),
        ElevatedButton(
          child: Text('印出輸入框內容'),
          onPressed: btnEvent,
        )
      ],
    );
  }

  void btnEvent() {
    print(myController.text);
  }
}

執行畫面

補充資料

影片中 RaisedButton 目前已過時,講義更新採用新版 Flutter 2 採用 ElevatedButton ,更多詳細內容,可參考: New Buttons and Button Themes


那今天就介紹到這邊囉~

順帶一提,KT 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這篇文章分享給更多人喔。

我們明天見囉!!!掰掰~

參考資料

HKT 線上教室
http://tw-hkt.blogspot.com/

Background vector created by freepik
https://www.freepik.com

這個網誌中的熱門文章

最新入門零基礎 Java 教學【從零開始學 Java 程式設計】Java教學課程目錄 (IntelliJ IDEA 開發教學)

2023 最新入門零基礎 Kotlin教學【從零開始學 Kotlin 程式設計】Kotlin 教學課程目錄 (Android Kotlin, IntelliJ IDEA, Android Studio, Android APP 開發教學)

Android Studio 歷代版本下載點

nano 文字編輯器

2022 最新入門零基礎 Flutter教學 【Flutter 程式設計入門實戰 30 天】Flutter 教學課程目錄 (IntelliJ IDEA 開發教學)