iT邦幫忙

2021 iThome 鐵人賽

DAY 21
0
Mobile Development

程式初學就來點swift吧!教你掌握整個蘋果生態圈!系列 第 21

Day 21 - SwiftUI開發學習5(文字填入)

今天我們來學習如何使用填入文字的物件

正文

文字填入 TextField

可以將文字填入進去。

如果你有學過kotlin,我這邊要解釋一下因為kotlin必須手動叫出鍵盤。但在swift這邊,如果你有輸入匡的話,那系統會自動幫你開啟鍵盤。

首先一樣,我們設定一個變數為t,在structure的底下。

@State private var t = ""

接著我們將以下寫入至你的程式。

TextField("text", text: $t)

第一個text意思是底字,開始打字後就會自動消失。然後我們把它改請輸入試試看。

輸出結果為:

邊框

接下來要交的如何製作邊框,因為我們剛剛的文字框是無邊框的。

一般圓角邊框

我們可以用swiftui底下的overlay 做出邊角圓形的輸入框。

一樣我們可以套入我們之前做的Color。

TextField("請輸入", text: $t)
                .padding()
                .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color("pppink"), lineWidth: 5)
                )

取得輸入的文字

概念

先添加一組Button,按下Button後,將剛剛輸入的印出來在螢幕上。

實作

添加一組Button,我們直接搬之前做好的。

Button(action: {
                print(t)
            }) {
                Text("我超帥按鈕")

按下我超帥按鈕之後,terminal就會顯示出來。

隱藏文字 Securefiled

我們把TextField改成Securefield就可以了。

改成安全輸入後,就會變成你輸入密碼的時候一樣了。

總結

今天學完了輸入的部分,但是要如何在應用程式顯示出來呢?

這部分我們明天來學習!


上一篇
Day 20 - SwiftUI開發學習4(切換分頁)
下一篇
Day 22 - SwiftUI開發實作1 (簡易計算機)
系列文
程式初學就來點swift吧!教你掌握整個蘋果生態圈!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言