16.【python kivy app 開發】使用BoxLayout排版,並透過TextInput輸入文字

更新 發佈閱讀 3 分鐘


本篇開始:

  • 我的開發環境是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'
vocus|新世代的創作平台

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


3.本篇小結

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


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


本篇結束:

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

留言
avatar-img
艾肯比工程師
4會員
77內容數
主要分享應用程式開發過程、遭遇困難及解決技巧,提供給自學或獨立開發者做為參考,希望能對您們有所幫助。
艾肯比工程師的其他內容
2025/04/30
這篇文章記錄了使用Kivy框架開發一個心算訓練APP的過程,其中介紹使用Python程式碼產生隨機數字,並在介面上顯示。文章以我開發 CountInMind APP為例,說明如何隨機數字生成、避免數字重複以及加減法計算等功能。本篇為求精簡,完整的程式碼請參考先前文章中分享內容。
Thumbnail
2025/04/30
這篇文章記錄了使用Kivy框架開發一個心算訓練APP的過程,其中介紹使用Python程式碼產生隨機數字,並在介面上顯示。文章以我開發 CountInMind APP為例,說明如何隨機數字生成、避免數字重複以及加減法計算等功能。本篇為求精簡,完整的程式碼請參考先前文章中分享內容。
Thumbnail
2025/04/23
這篇文章記錄了使用Kivy框架開發一個心算訓練APP的過程,其中介紹使用Python程式碼產生隨機數字,並在介面上顯示。文章以我開發 CountInMind APP為例,說明如何隨機數字生成、避免數字重複以及減法計算等功能。本篇為求精簡,完整的程式碼請參考先前文章中分享內容。
Thumbnail
2025/04/23
這篇文章記錄了使用Kivy框架開發一個心算訓練APP的過程,其中介紹使用Python程式碼產生隨機數字,並在介面上顯示。文章以我開發 CountInMind APP為例,說明如何隨機數字生成、避免數字重複以及減法計算等功能。本篇為求精簡,完整的程式碼請參考先前文章中分享內容。
Thumbnail
2025/04/18
這篇文章記錄了使用Kivy框架開發一個心算訓練APP的過程,其中介紹使用Python程式碼產生隨機數字,並在介面上顯示。文章以我開發 CountInMind APP為例,說明如何隨機數字生成、避免數字重複以及加法總和計算等功能。本篇為求精簡,完整的程式碼請參考先前文章中分享內容。
Thumbnail
2025/04/18
這篇文章記錄了使用Kivy框架開發一個心算訓練APP的過程,其中介紹使用Python程式碼產生隨機數字,並在介面上顯示。文章以我開發 CountInMind APP為例,說明如何隨機數字生成、避免數字重複以及加法總和計算等功能。本篇為求精簡,完整的程式碼請參考先前文章中分享內容。
Thumbnail
看更多
你可能也想看
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
這篇內容,將教你如何開啟新的GameMaker專案,並調整畫面佈局。也會講解,為何建議用英文語系,來進行遊戲開發。
Thumbnail
本文利用pyqt5,使用pyttsx3將QLineEdit(單行輸入框)的字串,轉成語音呈現出來。
Thumbnail
本文利用pyqt5,使用pyttsx3將QLineEdit(單行輸入框)的字串,轉成語音呈現出來。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
INI 檔案是一種配置檔案格式,常用於保存設定資料和組態資訊。 它使用簡單的鍵值對結構來組織資料,通常用於程式、應用程式或操作系統中的配置和初始化設定。 INI 檔案每個鍵值對包含一個名稱(鍵)和對應的值。 基本的檔案格式如下: [Section1] Key1 = Value1 Key2 =
Thumbnail
INI 檔案是一種配置檔案格式,常用於保存設定資料和組態資訊。 它使用簡單的鍵值對結構來組織資料,通常用於程式、應用程式或操作系統中的配置和初始化設定。 INI 檔案每個鍵值對包含一個名稱(鍵)和對應的值。 基本的檔案格式如下: [Section1] Key1 = Value1 Key2 =
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
理解一個全新的操作環境有時候可能是一個挑戰,尤其對於那些剛開始接觸VS Code的開發者來說,即便具備一定的英文閱讀能力,可能也會對這個陌生的操作環境感到徬徨和不安。不過,沒有必要擔心,我們接下來就來一起用短短的一分鐘時間,將VS Code轉換成最熟悉的中文環境吧! 安裝繁體中文語言包 由於VS
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
打開 jupyter notebook 寫一段 python 程式,可以完成五花八門的工作,這是玩程式最簡便的方式,其中可以獲得很多快樂,在現今這種資訊發達的時代,幾乎沒有門檻,只要願意,人人可享用。 下一步,希望程式可以隨時待命聽我吩咐,不想每次都要開電腦,啟動開發環境,只為完成一個重複性高
Thumbnail
我的開發環境是win11,python是3.10.7版本,kivy我設定在2.1.0版本,編碼的工具是Visual Studio Code(VS Code),本篇說明加入BoxLayout版面,以及TextInput物件。
Thumbnail
我的開發環境是win11,python是3.10.7版本,kivy我設定在2.1.0版本,編碼的工具是Visual Studio Code(VS Code),本篇說明加入BoxLayout版面,以及TextInput物件。
Thumbnail
Python的模組和庫是可重用的程式碼塊,可透過import語句引入。特定部分可以透過from和import引入,並可使用as指定別名。第三方模組可透過pip工具安裝並在程式碼中使用。此外,也可以創建自定義模組並在其他Python文件中引用。
Thumbnail
Python的模組和庫是可重用的程式碼塊,可透過import語句引入。特定部分可以透過from和import引入,並可使用as指定別名。第三方模組可透過pip工具安裝並在程式碼中使用。此外,也可以創建自定義模組並在其他Python文件中引用。
Thumbnail
在Python中,import是一個關鍵字,用於將其他模組或套件中的程式碼引入到當前的程式中以供使用。 這個關鍵字允許你在你的程式中使用其他地方定義的變數、函式和類等。 當你使用import時,Python會搜索指定模組或套件的位置,並將其中的程式碼載入到你的程式中,這樣你就可以在程式中使用它們
Thumbnail
在Python中,import是一個關鍵字,用於將其他模組或套件中的程式碼引入到當前的程式中以供使用。 這個關鍵字允許你在你的程式中使用其他地方定義的變數、函式和類等。 當你使用import時,Python會搜索指定模組或套件的位置,並將其中的程式碼載入到你的程式中,這樣你就可以在程式中使用它們
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News