英文:
Kivy: How Can i Adjust Button In Right Size?
问题
**主屏幕：**
你能帮我修复一下按钮的问题吗？
这是我的主屏幕。
[![进入图片描述][1]][1]
**我的目标：**
我希望我的按钮是这样的：
缩小50％并且彼此之间有空白。
[![进入图片描述][2]][2]
**KV 代码**
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
Button:
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
Button:
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
[1]: https://i.stack.imgur.com/jaiu9.png
[2]: https://i.stack.imgur.com/rtV4e.png
**我尝试过但没有成功的方法**
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
Button:
size-hint: 0.50, 1 # 我添加了这一行 ******************
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
Button:
size-hint: 0.50, 1 # 我添加了这一行 *************************
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
我添加了 size-hint: 0.50, 1 到按钮但没有起作用。
我该如何修复这个问题。
我在代码中没有使用任何窗口配置。 我在项目中使用了 allow_stretch: True 和 keep_ratio: False 代码。
非常感谢
英文:
Main screen:
Could you please help me to fix my button problem.
Here is my Home screen.
MY Goal:
I want my buttons like this:
%50 smaller and have blanks between each other.
KV codes
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
Button:
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
Button:
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
What i tried and not worked
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
Button:
size-hint: 0.50, 1 # I ADDED THIS LINE **********************
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
Button:
size-hint: 0.50, 1 # I ADDED THIS LINE ******************************
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
I addded size-hint: 0.50, 1 to buttons but not worked.
How can i fix this.
I did't use any window config on my code. I used allow_stretch: True and keep_ratio: False codes for my project.
Thanks very much
答案1
得分: 0
BoxLayout尝试将所有可用空间分配给其子元素，因此按size_hint的比例分配其空间。只要使用size_hint，BoxLayout将确保其子元素填充整个宽度。
要获得所需的效果，一种简单的方法是将每个Button放在AnchorLayout中。AnchorLayout默认情况下会使其子元素居中，而您添加的size_hint现在是指AnchorLayout的大小。以下是修改后的kv文件：
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
AnchorLayout:
Button:
size_hint: 0.50, 1 # 我添加了这一行 ****************
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
AnchorLayout:
Button:
size_hint: 0.50, 1 # 我添加了这一行 ****************
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
英文:
The BoxLayout tries to give all its space to its children, so it portions out its space in proportion to the size_hint. As long as you just use size_hint, the Boxlayout will make sure that its children fill its entire width.
An easy way to get what you want is to just put each Button in an AnchorLayout. The AnchorLayout centers its child by default, and the size_hint that you added now refers to the AnchorLayout size. Here is a modified version of your kv that does this:
#:import NoTransition kivy.uix.screenmanager.NoTransition
<Predictor>:
ScreenManager:
transition: NoTransition()
id: sm
size: root.width, root.height
Screen:
name: 'homepage_screen'
Image:
source: 'images/homepage_background.png'
allow_stretch: True
keep_ratio: False
BoxLayout:
size_hint: 1, 0.10
AnchorLayout:
Button:
size_hint: 0.50, 1 # I ADDED THIS LINE **********************
id: underOver_button_homepage
on_press: root.underOver(img_underOver, sm)
background_color: 0, 0, 0, 0
Image:
id: img_underOver
source: 'images/underover_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: underOver_button_homepage.pos
AnchorLayout:
Button:
size_hint: 0.50, 1 # I ADDED THIS LINE ******************************
id: side_button_homepage
on_release: root.side(img_side, sm)
background_color: 0, 0, 0, 0
Image:
id: img_side
source: 'images/side_button.png'
allow_stretch: True
keep_ratio: False
size: self.parent.size
pos: side_button_homepage.pos
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论