Размещение объектов в Flet

Рейтинг: 0Ответов: 2Опубликовано: 08.07.2023

Проблема в том, что не получается разместить несколько элементов на одном контейнере-фоне в Flet. Мне нужно что-бы поверх контейнера background были элементы activate_btn и change_theme_btn, а получается либо поместить только один, через content="кнопка", либо другими способами, но получается некорректное размещение объектов.

import flet as ft
import time


def app(page: ft.page):
    page.title = 'flet test'
    page.window_width = 460
    page.window_height = 620
    page.window_resizable = False
    page.theme_mode = ft.ThemeMode.LIGHT

    def change_theme(e):
        if page.theme_mode == "DARK":
            page.theme_mode = "LIGHT"
            background.gradient.colors = [ft.colors.WHITE, ft.colors.PURPLE]
            change_theme_btn.content.icon = ft.icons.BEDTIME
        else:
            page.theme_mode = "DARK"
            background.gradient.colors = ['#7038aa', '#160033']

            change_theme_btn.content.icon = ft.icons.WB_SUNNY_ROUNDED
        time.sleep(0.2)
        page.update()

    activate_btn = ft.Container(
        width=160, height=160,
        padding=10,
        alignment=ft.alignment.center,
        content=(ft.ElevatedButton(
            text='ON', width=150, height=150,
        style=ft.ButtonStyle(shape=ft.CircleBorder())
        )
        )

    )

    change_theme_btn = ft.Container(
        content=ft.IconButton(icon=ft.icons.BEDTIME,
                              tooltip="Change appearance mode", on_click=change_theme,
                              height=50, width=50),
        width=60,
        height=60,
        padding=10,
        alignment=ft.alignment.top_right)


    background = (ft.Container(
        gradient=ft.LinearGradient(
            begin=ft.alignment.top_left,
            end=ft.alignment.bottom_right,
            colors=[ft.colors.WHITE, ft.colors.PURPLE]
        ),
        width=460,
        height=620,
        margin=-10
    )
    )

    page.add(background)
    page.update()

ft.app(target=app)

Ответы

▲ 0

Container предназначен для размещение в нем только одного дочернего элемента. Если хочешь разместить несколько элементов в одном родительском элементе то используй Column или Row

▲ 0

Как уже сказал GradnKing, чтобы отобразить контейнеры в столбик (вертикально), их нужно поместить в Column (или в Row, чтобы отобразить их строчно/горизонтально).

Для этого вам надо поменять эту строку:

page.add(background)

На этот кусок кода:

page.add(
        ft.Column(
            controls=[
                change_theme_btn,
                activate_btn,
                background,
            ]
        )
    )