📜  kivy 中的浮动动作类型按钮 - Python

📅  最后修改于: 2022-05-13 01:55:08.730000             🧑  作者: Mango

kivy 中的浮动动作类型按钮 - Python

Kivy 是Python中一个独立于平台的 GUI 工具。因为它可以在Android、IOS、linux和Windows等平台上运行。它基本上是用来开发Android应用程序的,但这并不意味着它不能在桌面应用程序上使用。
现在在本文中,我们将了解如何使用 kivy Python创建类似于浮动操作按钮的按钮类型。

要学习如何创建它,您必须对画布中的布局、按钮、画布和椭圆有很好的了解。这些都是我们将用来创建按钮的。所以我们正在创建一个按钮,就像我们在右侧的 gmail 上看到的那样,即用于在移动应用程序(而不是网站)标志中编写新电子邮件。

Basic Approach:

1) import kivy
2) import kivyApp
3) import Boxlayout
4) Set minimum version(optional)
5) create Layout class
6) create App class
7) Set up .kv file :
       1) Add Floating Button Properties
       2) Create Main Window
       3) Add Float Button
8) return Layout/widget/Class(according to requirement)
9) Run an instance of the class

方法的实施——
主文件

Python3
## Sample Python application demonstrating that
## How to create a button like floating Action Button
## in Kivy using .kv file
   
###################################################
# import modules
   
import kivy
   
# base Class of your App inherits from the App class.  
# app:always refers to the instance of your application 
from kivy.app import App
   
# BoxLayout arranges widgets in either
# in a vertical fashion that
# is one on top of another or in a horizontal
# fashion that is one after another.
from kivy.uix.boxlayout import BoxLayout
   
# To change the kivy default settings 
# we use this module config 
from kivy.config import Config 
      
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True)
 
# creating the root widget used in .kv file
class MainWindow(BoxLayout):
    pass
     
 
# creating the App class in which name
#.kv file is to be named main.kv
class MainApp(App):
    # defining build()
    def build(self):
        # returning the instance of root class
        return MainWindow()
 
# run the app
if __name__ == '__main__':
    MainApp().run()


Python3
#.kv file implementation of Float Button
 
 
# using Float Layout for the creation of Floatbutton
# Here we are creating the properties of button
# Button will be created in Main window Box Layout
 

    id: float_root  # Giving id to button
    size_hint: (None, None)
    text: ''
    btn_size: (70, 70)
    size: (70, 70)
    bg_color: (0.404, 0.227, 0.718, 1.0)
    pos_hint: {'x': .6}
 
    # Adding shape and all, size, position to button
    Button:
        text: float_root.text
        markup: True
        font_size: 40
        size_hint: (None, None)
        size: float_root.btn_size
        pos_hint: {'x': 5.5, 'y': 3.8}
        background_normal: ''
        background_color: (0, 0, 0, 0)
        canvas.before:
            Color:
                rgba: (0.404, 0.227, 0.718, 1.0)
            Ellipse:
                size: self.size
                pos: self.pos
         
# Creation of main window
:
    BoxLayout:
         
        # Creating the Float button
        FloatButton:
            text: '+'
            markup: True
            background_color: 1, 0, 1, 0


.kv 文件实现
主文件

Python3

#.kv file implementation of Float Button
 
 
# using Float Layout for the creation of Floatbutton
# Here we are creating the properties of button
# Button will be created in Main window Box Layout
 

    id: float_root  # Giving id to button
    size_hint: (None, None)
    text: ''
    btn_size: (70, 70)
    size: (70, 70)
    bg_color: (0.404, 0.227, 0.718, 1.0)
    pos_hint: {'x': .6}
 
    # Adding shape and all, size, position to button
    Button:
        text: float_root.text
        markup: True
        font_size: 40
        size_hint: (None, None)
        size: float_root.btn_size
        pos_hint: {'x': 5.5, 'y': 3.8}
        background_normal: ''
        background_color: (0, 0, 0, 0)
        canvas.before:
            Color:
                rgba: (0.404, 0.227, 0.718, 1.0)
            Ellipse:
                size: self.size
                pos: self.pos
         
# Creation of main window
:
    BoxLayout:
         
        # Creating the Float button
        FloatButton:
            text: '+'
            markup: True
            background_color: 1, 0, 1, 0
 
                

输出: