【從零開始學 Flutter 程式設計】TextField 文字輸入框元件

【從零開始學 Flutter 程式設計】線上教學課程目錄 使用 Dart 程式語言,開發 Android 和 iOS APP 應用程式。

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: '請輸入...'),
        )

執行畫面

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

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 線上教室,臉書粉絲團,會不定期發佈相關資訊,不想錯過最新資訊,不要忘記來按讚,加追蹤喔!也歡迎大家將這套課程分享給更多人喔。
我們下次再見囉!!!掰掰~

留言

這個網誌中的熱門文章

最新入門零基礎【從零開始學 Java 程式設計】線上教學課程目錄

NS - Nintendo Switch 遊戲比價網

【從零開始學 Kotlin 程式設計】Android Kotlin 線上教學課程目錄