16.學習Kivy|加入BoxLayout版面，以及TextInput物件

本篇開始:

• 我的開發環境是win11
• python是3.10.7版本
• kivy我設定在2.1.0版本
• 編碼的工具是Visual Studio Code(VS Code)

以我實際開發的APP為例，

我想做的是可以訓練基本加(減)法的心算工具。

命名app叫 「CountInMind」。

終於進入核心頁面，開發app第4頁，先說明一下，在第4頁會設計有自動出題及答題功能，操作方面會有點類似計算機的介面。

1.使用BoxLayout版面，在.kv加入<Forthscreen>及BoxLayout版面

以下為.kv程式碼:

<Forthscreen>:
    name: 'forth'
    BoxLayout:
        orientation: 'vertical'
        size: root.width, root.height

▲說明:

1.name: 'forth' # 先為第4頁設定 name屬性

2.BoxLayout，是一種格子版面

3.orientation: 'vertical' #可以是 horizontal或 vertical方向

4.size: root.width, root.height #大小等於app根物件之寬長範圍。

2.加入TextInput物件，為輸入視窗，可以在裡面輸入字串等

以下.kv程式碼

# 在 BoxLayout: 加入 TextInput
TextInput:
            id: textinput
            text: ''
            font_size: 20
            font_name: './font/TW-Kai-98_1.ttf'
            size_hint: 1, 0.1
            halign: 'right'

▲說明:

1.id: textinput #設定一個id屬性，方便後面傳送訊息

2.text: '' #一開始為空白

3.size_hint: 1, 0.1 #物件大小為app的寬1倍、長0.1倍

4.halign: 'right' #使游標水平位置靠右，也可 left靠左

☆補充說明:因為目前只有一個 TextInput物件，看不出來 BoxLayout水平或垂直效果，加入其他物件看看。

以下.kv程式碼(這只是示範用的)

Label:
            text:'我是標題範例'
            font_size: 20
            font_name: './font/TW-Kai-98_1.ttf'

▲說明:因為 Label未指定大小，TextInput的長為0.1倍， Label則佔滿了下面0.9倍位置

3.本篇小結

加入BoxLayout版面，以及TextInput基本使用功能。

為精簡篇幅，本篇所使用完整(.py)(.kv)程式碼，請參考第9~15篇內容。

本篇結束:

在自學路上遇到困難是很正常的事，只要堅持到底，相信就會有所成果，期勉大家一同努力。