flex布局实现左边固定右边自适应：Flet简明中文教程二十一
flex布局实现左边固定右边自适应：Flet简明中文教程二十一拖动控件内容contentimport flet from flet import Container Draggable DragTarget Page Row Text alignment colors def main(page: Page): page.title = "Drag and Drop example" def drag_accept(e): # get draggable (source) control by its ID src = page.get_control(e.data) # update text inside draggable control src.content.content.value = "0"
Flet中的拖放机制非常简单——用户开始拖拽Draggable控件并将其“放到”DragTarget上。如果Draggable和Dragtarget具有相同的group，则DragTarget将调用on_accept事件处理程序并将Draggable控件ID作为事件数据传递。在这种情况下，Draggable控件充当拖放操作的源“数据”。
在下面的程序中，拖动显示“1”的左控件到显示“0”的右控件上方，当拖动操作完成时，左控件被替换为“0”，右控件变成“1”:
import flet
from flet import Container Draggable DragTarget Page Row Text alignment colors
def main(page: Page):
page.title = "Drag and Drop example"
def drag_accept(e):
# get draggable (source) control by its ID
src = page.get_control(e.data)
# update text inside draggable control
src.content.content.value = "0"
# update text inside drag target control
e.control.content.content.value = "1"
page.update()
page.add(
Row(
[
Draggable(
group="number"
content=Container(
width=50
height=50
bgcolor=colors.CYAN_200
border_radius=5
content=Text("1" size=20)
alignment=alignment.center
)
)
Container(width=100)
DragTarget(
group="number"
content=Container(
width=50
height=50
bgcolor=colors.PINK_200
border_radius=5
content=Text("0" size=20)
alignment=alignment.center
)
on_accept=drag_accept
)
]
)
)
flet.app(target=main)
Draggable控件还有以下两个属性使拖放操作更具互动性。例如，具有content_when_drag属性，在进行拖动操作时原控件显示的内容。content_feedback属性显示鼠标拖动下控件的内容。默认情况下，鼠标拖动 显示原控件50%内容透明度。
修改代码，拖动时显示1
import flet
from flet import Container Draggable DragTarget Page Row Text alignment colors
def main(page: Page):
page.title = "Drag and Drop example"
def drag_accept(e):
# get draggable (source) control by its ID
src = page.get_control(e.data)
# update text inside draggable control
src.content.content.value = "0"
# update text inside drag target control
e.control.content.content.value = "1"
page.update()
page.add(
Row(
[
Draggable(
group="number"
content=Container(
width=50
height=50
bgcolor=colors.CYAN_200
border_radius=5
content=Text("1" size=20)
alignment=alignment.center
)
content_when_dragging=Container(
width=50
height=50
bgcolor=colors.BLUE_GREY_200
border_radius=5
)
content_feedback=Text("1")
)
Container(width=100)
DragTarget(
group="number"
content=Container(
width=50
height=50
bgcolor=colors.PINK_200
border_radius=5
content=Text("0" size=20)
alignment=alignment.center
)
on_accept=drag_accept
)
]
)
)
flet.app(target=main)
DragTarget控件有on_will_accept和on_leave事件处理程序，在例子中修改DragTarget，当控件准备好接受传入的拖动时，在它周围画一个边框:
import flet
from flet import (Container Draggable DragTarget Page Row Text alignment border colors)
def main(page: Page):
page.title = "Drag and Drop example 2"
def drag_accept(e):
# get draggable (source) control by its ID
src = page.get_control(e.data)
# update text inside draggable control
src.content.content.value = "0"
# reset source group so it cannot be dropped to a target anymore
src.group = ""
# update text inside drag target control
e.control.content.content.value = "1"
# reset border
e.control.content.border = None
page.update()
def drag_will_accept(e):
# black border when it's allowed to drop and red when it's not
e.control.content.border = border.all(
2 colors.BLACK45 if e.data == "true" else colors.RED
)
e.control.update()
def drag_leave(e):
e.control.content.border = None
e.control.update()
page.add(
Row(
[
Draggable(
group="number"
content=Container(
width=50
height=50
bgcolor=colors.CYAN_200
border_radius=5
content=Text("1" size=20)
alignment=alignment.center
)
content_when_dragging=Container(
width=50
height=50
bgcolor=colors.BLUE_GREY_200
border_radius=5
)
content_feedback=Text("1")
)
Container(width=100)
DragTarget(
group="number"
content=Container(
width=50
height=50
bgcolor=colors.PINK_200
border_radius=5
content=Text("0" size=20)
alignment=alignment.center
)
on_accept=drag_accept
on_will_accept=drag_will_accept
on_leave=drag_leave
)
]
)
)
flet.app(target=main)Draggable 控件属性
group
所属的组，Draggable和DragTarget必须在同一组中。
content
拖动控件内容
content_when_dragging
拖动时控件显示的内容
content_feedback
拖动时跟随鼠标移动的控件内容
DragTarget 属性group
所属的组，Draggable和DragTarget必须在同一组中。
content
拖动到目标控件内容
DragTarget 事件on_will_accept
拖动到目标空间上，未释放鼠标时触发
on_accept
拖动到目标空间上，释放鼠标时触发
on_leave
拖动到目标空间上，未释放鼠标又离开触发
