英文:
Python Flet vertical alignment for column of controls
问题
我正在尝试通过实现一个带有矩形场地的简单游戏来学习 Flet（Python）。玩家通过按压他一侧的按钮来进行移动。因此，我想把这些按钮放得离他的家更近一些（对于第一个玩家来说是左上角，对于第二个玩家来说是右下角）。
非常简化的代码：
import flet as ft
def main(page: ft.Page):
page.add(
ft.Row([
ft.Column(
[ft.Container(ft.Text(f"{i}"), alignment=ft.alignment.center) for i in range(3)],
alignment=ft.alignment.top_right),
ft.Container(ft.Text("游戏场地"), width=300, height=300, bgcolor=ft.colors.TEAL,
alignment=ft.alignment.center),
ft.Column([ft.Container(ft.Text(f"{i}")) for i in range(3)],
alignment=ft.alignment.bottom_left),
])
)
ft.app(main, "布局示例")
结果是：
期望的布局：
有人能帮我纠正布局吗？谢谢！
英文:
I'm trying to learn Flet (Python) by implementing a simple game with a rectangular field. A player makes a move by pressing buttons on his side. So, I want to place such buttons closer to his home (left-top corner for the first player and bottom-right corner for the second).
Very simplified code:
import flet as ft
def main(page: ft.Page):
page.add(
ft.Row([
ft.Column(
[ft.Container(ft.Text(f"{i}"), alignment=ft.alignment.center) for i in range(3)],
alignment=ft.alignment.top_right),
ft.Container(ft.Text("Game field"), width=300, height=300, bgcolor=ft.colors.TEAL,
alignment=ft.alignment.center),
ft.Column([ft.Container(ft.Text(f"{i}")) for i in range(3)],
alignment=ft.alignment.bottom_left),
])
)
ft.app(main, "Layout example")
The result is:
Expected layout:
Could someone help me to correct the layout? Thanks!
答案1
得分: 1
import flet as ft
def main(page: ft.Page):
page.add(
ft.Row([
ft.Column(
[ft.Container(ft.Text(f"{i}")) for i in range(3)], height=500, alignment=ft.MainAxisAlignment.START
),
ft.Container(ft.Text("Game field"), width=500, height=500, bgcolor=ft.colors.TEAL, alignment=ft.alignment.center),
ft.Column([ft.Container(ft.Text(f"{i}")) for i in range(3)], height=500, alignment=ft.MainAxisAlignment.END)
])
)
ft.app(main, "Layout example")
只需在容器对应的列中添加高度属性，将alignment设置为MainAxisAlignment.START和MainAxisAlignment.START。
您提供的代码不起作用，因为包含容器的列没有足够的空间来移动，添加高度属性可以帮助它获得足够的空间来移动。
英文:
import flet as ft
def main(page: ft.Page):
page.add(
ft.Row([
ft.Column(
[ft.Container(ft.Text(f"{i}")) for i in range(3)], height=500, alignment=ft.MainAxisAlignment.START
),
ft.Container(ft.Text("Game field"), width=500, height=500, bgcolor=ft.colors.TEAL,
alignment=ft.alignment.center),
ft.Column([ft.Container(ft.Text(f"{i}")) for i in range(3)], height=500, alignment=ft.MainAxisAlignment.END
)
])
)
ft.app(main, "Layout example")
Just adding a height property with alignment as MainAxisAlignment.START and MainAxisAlignment.START in to corresponding column of containers.
The code you provide is not working because the column in which the container is placed doesn't have any space to move along providing height helps it to have enough space to move along
答案2
得分: 0
import flet as ft
def main(page: ft.Page):
def items(count):
items = []
for i in range(3):
items.append(
ft.Container(
content=ft.Text(value=str(i)),
alignment=ft.alignment.center
)
)
return items
def midcolumn_with_alignment(align: ft.MainAxisAlignment):
return ft.Column(
[
ft.Container(
content=ft.Column(canvas, alignment=align),
),
]
)
def column_with_alignment(align: ft.MainAxisAlignment):
return ft.Column(
[
ft.Container(
content=ft.Column(items(3), alignment=align),
height=400,
),
]
)
canvas = []
canvas.append(
ft.Container(
content=ft.Text("游戏场地"),
alignment=ft.alignment.center,
width=500,
height=500,
bgcolor=ft.colors.TEAL
)
)
page.add(
ft.Row(
[
column_with_alignment(ft.MainAxisAlignment.START),
midcolumn_with_alignment(ft.MainAxisAlignment.CENTER),
column_with_alignment(ft.MainAxisAlignment.END),
],
spacing=30,
alignment=ft.MainAxisAlignment.START,
)
)
ft.app(target=main)
英文:
import flet as ft
def main(page: ft.Page):
def items(count):
items = []
for i in range(3):
items.append(
ft.Container(
content=ft.Text(value=str(i)),
alignment=ft.alignment.center
)
)
return items
def midcolumn_with_alignment(align: ft.MainAxisAlignment):
return ft.Column(
[
ft.Container(
content=ft.Column(canvas, alignment=align),
),
]
)
def column_with_alignment(align: ft.MainAxisAlignment):
return ft.Column(
[
ft.Container(
content=ft.Column(items(3), alignment=align),
height=400,
),
]
)
canvas = []
canvas.append(
ft.Container(
content=ft.Text("Game field"),alignment=ft.alignment.center, width=500, height=500,bgcolor=ft.colors.TEAL
)
)
page.add(
ft.Row(
[
column_with_alignment(ft.MainAxisAlignment.START),
midcolumn_with_alignment(ft.MainAxisAlignment.CENTER),
column_with_alignment(ft.MainAxisAlignment.END),
],
spacing=30,
alignment=ft.MainAxisAlignment.START,
)
)
ft.app(target=main)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论