Cách tạo lưới 3x3 trong Python tkinter

Thư viện Tkinter của Python có một số công cụ để quản lý kích thước của các widget trong các ứng dụng dựa trên GUI. Những công cụ này được gọi là trình quản lý hình học. Trình quản lý lưới là một trong những công cụ này. Nó có nhiều tính linh hoạt và tùy biến hơn so với thường được sử dụng. trình quản lý pack[]. Chúng ta sẽ học cách sử dụng. trình quản lý hình học grid[] trong hướng dẫn lập trình Python hôm nay

Đọc. Cách tạo ứng dụng GUI Python đầu tiên của bạn

Cách tạo lưới trong Tkinter và Python

Để tạo lưới, bạn cần sử dụng. phương thức lưới []. Phương pháp này có thể được sử dụng trên cả cửa sổ và khung

Phương thức grid[] cho phép bạn chỉ định vị trí hàng và cột trong danh sách tham số của nó. Cả hàng và cột bắt đầu từ chỉ số 0. Ví dụ lưới[hàng=1, cột=2] chỉ định một vị trí trên cột thứ ba và hàng thứ hai của khung hoặc cửa sổ của bạn

Ví dụ mã Python bên dưới cho thấy cách bạn có thể lấy hình ảnh lưới ở trên

import tkinter as tk
 
window = tk.Tk[]
window.title["Grid Manager"]
 
for x in range[2]:
   for y in range[2]:
       frame = tk.Frame[
           master=window,
           relief=tk.RAISED,
           borderwidth=1
       ]
       frame.grid[row=x, column=y]  # line 13
       label = tk.Label[master=frame, text=f"\n\nrow {x}\t\t column {y}\n\n"]
       label.pack[]
 
window.mainloop[]
 

Đọc. Cách tạo Widget văn bản trong Python với Tkinter

Cách thêm phần đệm vào lưới Tkinter

Bạn có thể nhận thấy rằng các khung trong ví dụ trước hơi quá gần nhau. Bạn có thể thêm một số khoảng trống giữa các khung này thông qua một phương pháp được gọi là phần đệm

Có hai loại đệm. bên ngoài và bên trong. Phần đệm bên ngoài cho phép bạn đặt khoảng trống ở giữa bên ngoài các vật dụng. Bạn có thể thực hiện nó bằng cách sử dụng hai biến padx và pady. Padx chèn không gian theo chiều ngang, trong khi pady chèn không gian theo chiều dọc. Hai giá trị này được đo bằng pixel

Ví dụ: trong ví dụ mã trước đó, bạn có thể tạo khoảng cách bằng nhau theo một trong hai hướng bằng mã bên dưới

frame.grid[row=x, column=y padx=10 pady=10]  # line 13

Tự động thay đổi kích thước lưới Tkinter

Nếu bạn cố gắng điều chỉnh cửa sổ đã tạo trong ví dụ trước, bạn sẽ nhận thấy rằng lưới vẫn ở góc trên cùng bên trái và không phản hồi với việc thay đổi kích thước cửa sổ. Bạn có thể đảm bảo rằng lưới của bạn được tự động thay đổi kích thước với cửa sổ bằng cách sử dụng các phương thức columnconfigure[] và rowconfigure[]. Các phương pháp này áp dụng cho đối tượng cửa sổ

Phương thức columnconfigure[] thay đổi kích thước lưới theo chiều dọc, trong khi rowconfigure[] thay đổi kích thước lưới theo chiều ngang. Cả hai phương thức này đều có 3 đối số

  • Chỉ mục hàng/cột
  • thu nhỏ. Điều này xác định kích thước tối thiểu của widget. Điều này là cần thiết cho các mục đích dễ đọc, để thay đổi kích thước nhỏ nhất có thể vẫn có thể đọc được một cách hợp lý
  • cân nặng. Đây là thước đo tỷ lệ thay đổi kích thước của một cột hoặc hàng so với các cột hoặc hàng khác. Ví dụ: trọng số là 1 có nghĩa là một cột hoặc hàng thay đổi kích thước với cùng tốc độ với các cột hoặc hàng khác. Trọng số là 3 có nghĩa là một hàng hoặc cột thay đổi kích thước với tốc độ gấp ba lần so với các hàng hoặc cột khác. Theo mặc định, trường này được đặt thành 0, ngụ ý rằng một hàng hoặc cột không thay đổi kích thước khi cửa sổ thay đổi kích thước

Xem ví dụ mã bên dưới

import tkinter as tk
 
window = tk.Tk[]
window.title["Grid Manager"]
 
for x in range[2]:
   window.columnconfigure[x, weight=1, minsize=100]
   window.rowconfigure[x, weight=1, minsize=75]
   for y in range[2]:
       frame = tk.Frame[
           master=window,
           relief=tk.RAISED,
           borderwidth=1
       ]
       frame.grid[row=x, column=y, padx=10, pady=10]  # line 13
       label = tk.Label[master=frame, text=f"row {x}\ncolumn {y}"]
       label.pack[]
 
window.mainloop[]

Đọc. Các khóa học trực tuyến hàng đầu để học Python

Tóm tắt Trình quản lý lưới của Tkinter

Trình quản lý lưới Tkinter cho phép bạn định vị các vật dụng của mình. Hãy nhớ rằng trong trường hợp bạn muốn tạo khoảng cách cho các vật dụng của mình, trong trường hợp đó, bạn cần áp dụng phần đệm

Để thay đổi kích thước động của lưới Tkinter, các nhà phát triển Python cần sử dụng các phương thức columnconfigure[] và rowconfigure[]. Điều quan trọng cần nhớ là các phương thức này áp dụng cho đối tượng cửa sổ chứ không phải grid[]

Bạn muốn biết cách sử dụng lưới Python Tkinter? . Chúng ta sẽ xem cách sử dụng phương thức grid[] trong Python Tkinter. Ngoài ra, chúng tôi sẽ bao gồm các chủ đề này

  • Lưới Tkinter của Python
  • Cách sử dụng phương thức lưới Python Tkinter []
  • Ví dụ về lưới Tkinter trong Python
  • Python Tkinter Lưới căn trái
  • Chức năng lưới Tkinter của Python
  • Đệm lưới Python Tkinter
  • Khoảng cách cột lưới Tkinter của Python
  • Khoảng cách lưới Tkinter trong Python
  • Lưới Tkinter của Python không hoạt động
  • Mở rộng lưới Tkinter trong Python
  • Điền vào lưới Tkinter của Python

Mục lục

  • Lưới Tkinter của Python
  • Ví dụ về lưới Tkinter trong Python
  • Python Tkinter Lưới căn trái
  • Chức năng lưới Tkinter của Python
  • Đệm lưới Python Tkinter
  • Khoảng cách cột lưới Tkinter của Python
  • Khoảng cách lưới Tkinter trong Python
  • Lưới Tkinter của Python không hoạt động
  • Mở rộng lưới Tkinter trong Python
  • Điền vào lưới Tkinter của Python

Lưới Tkinter của Python

  • Python Tkinter cung cấp các tiện ích giúp ứng dụng hiển thị tốt và dễ sử dụng cho người dùng. Vị trí đặt widget trên ứng dụng cũng quan trọng không kém việc chọn widget phù hợp
  • Python Tkinter cung cấp ba loại Trình quản lý bố cục giúp nhà phát triển đặt tiện ích vào đúng vị trí trên ứng dụng
    • Đóng gói. nó gói tất cả các vật dụng vào trung tâm và đặt các vật dụng theo trình tự
    • lưới. Lưới đặt các tiện ích theo hàng và theo cột
    • Nơi. Đặt các tiện ích vị trí theo tọa độ X và Y
  • Trong hướng dẫn này, chúng ta sẽ thảo luận về phương thức Python Tkinter Grid[]. Chúng ta sẽ khám phá tất cả các tùy chọn có sẵn trong trình quản lý bố cục lưới trong Python Tkinter

Ví dụ về lưới Tkinter trong Python

Trong phần này, chúng ta sẽ xem một ví dụ về Trình quản lý bố cục lưới trong Python Tkinter, ngoài ra chúng ta sẽ thấy một số tính năng của trình quản lý bố cục lưới trong Python Tkinter

  • Trình quản lý bố cục lưới yêu cầu các hàng và cột làm đối số bằng cách sử dụng thông tin này, nó đặt tiện ích trên màn hình
  • các hàng và cột bắt đầu từ trên cùng bên trái của màn hình. Bạn có thể hình dung bảng tính để hiểu rõ hơn
  • columnpan được sử dụng để chiếm các ô khác của cột như trong ví dụ bên dưới, bạn có thể thấy nút đó đang chiếm không gian của hai ô
  • Dưới đây là một ví dụ về việc triển khai lưới trên các vật dụng. Trong ví dụ này, chúng tôi đã sử dụng các tiện ích nhãn, mục nhập và nút

Lưới Tkinter của Python

Mã nguồn của ví dụ trên

Trong ví dụ này, chúng tôi đã đặt các tiện ích nhãn ở cột 0, tiện ích mục nhập ở cột 1. Trong khi nút được mở rộng thành hai cột

from tkinter import *

ws = Tk[]
ws.title['PythonGuides']
ws.geometry['400x300']
ws.config[bg='#9FD996']

Label[
    ws,
    text='Enter Email', 
    bg='#9FD996'
].grid[row=0, column=0]

Label[
    ws,
    text='Enter Password',
    bg='#9FD996'
].grid[row=1, column=0]

Entry[ws].grid[row=0, column=1]
Entry[ws].grid[row=1, column=1]

Button[
    ws,
    text='Login',
    command=None
].grid[row=2, columnspan=2]


ws.mainloop[]

Python Tkinter Lưới căn trái

  • Trình quản lý bố cục lưới trong Python Tkinter cung cấp một tùy chọn cố định cho phép căn chỉnh các widget theo hướng TRÁI, PHẢI, TRÊN, DƯỚI. Trong phần này, chúng ta sẽ xem cách đặt căn chỉnh sang Trái bằng cách sử dụng Lưới trong Python Tkinter
  • Sticky yêu cầu chữ cái đầu tiên của hướng chung ở dạng chữ thường để đặt tiện ích theo hướng lựa chọn. Dưới đây là các tùy chọn
    • dính = 'e'. Căn sang phải
    • dính = 'w'. Căn trái
    • dính = 'n'. Căn chỉnh lên trên
    • dính = 's'. Căn chỉnh xuống dưới
grid[row=0, column=1, sticky='w']

Ví dụ về Python Tkinter Grid Align to Left

Trong ví dụ này, chúng tôi đã hiển thị hai hình ảnh. Trong hình ảnh đầu tiên, tiện ích Nhãn và tiện ích Nút không được căn chỉnh trong khi ở hình ảnh thứ hai, chúng tôi đã căn chỉnh cả hai tiện ích sang trái bằng cách sử dụng tùy chọn cố định trong Trình quản lý bố cục lưới của Python Tkinter

Python Tkinter Grid căn trái bằng cách sử dụng dính

Chức năng lưới Tkinter của Python

  • Grid trong Python Tkinter là hàm cho phép quản lý bố cục của widget. Nó nhận các hàng và cột làm đối số và đặt tiện ích con ở định dạng 2D
  • Do thuộc tính 2D của nó, Python Tkinter Grid được sử dụng rộng rãi cho các trò chơi và ứng dụng như Máy tính, Tic-Tac-Toe, Mines, v.v.
  • Ngoài các hàng và cột, Grid cung cấp thêm một số tùy chọn
Tùy chọnMô tảcột, hàngCột đề cập đến các ô theo chiều dọc của bảng
row đề cập đến các ô theo chiều ngang của tablecolumnspan, rowspancolumnspan hợp nhất các cột để cung cấp thêm không gian
rowspan hợp nhất các hàng để cung cấp thêm không gian theo chiều ngangipadx, ipadyipadx thêm pixel theo chiều dọc trong đường viền của tiện ích .
ipady add pixels horizontally in the widget’s borderpadx, padypadx add pixels vertically outside the widget’s border
pady add pixels horizontally outside the widget’s borderstickyit sticks the widget in North, South, East, west directions.

Đệm lưới Python Tkinter

  • Lưới trong Python Tkinter cung cấp tùy chọn đệm bằng cách sử dụng không gian có thể được thêm vào bên trong cũng như bên ngoài đường viền của tiện ích
  • Trong khi tổ chức một tiện ích đôi khi kích thước hoặc vị trí mặc định của tiện ích không đáp ứng được kỳ vọng của nhà phát triển. Tại thời điểm đó, bằng cách sử dụng phần đệm, nhà phát triển sẽ điều chỉnh tiện ích
  • Có hai loại đệm
    • Đệm bên trong đường viền của widget
    • Đệm bên ngoài đường viền của widget
  • ipadx, ipady được sử dụng để thêm khoảng trắng theo chiều ngang và chiều dọc bên trong đường viền của tiện ích
  • padx, pady được sử dụng để thêm khoảng trắng theo chiều ngang và chiều dọc bên ngoài đường viền của tiện ích

Ví dụ về đệm lưới trong Python Tkinter

Trong ví dụ này, bốn ảnh được hiển thị và mỗi ảnh hiển thị sự thay đổi trong nút khi thêm phần đệm. Chúng tôi đã chọn nút 5 nằm ở trung tâm của tất cả các nút

Hình ảnh 1. hình ảnh không có bất kỳ phần đệm nào. Mục đích add ảnh này là để các bạn xem ảnh gốc để các bạn so sánh với các ảnh đã thay đổi

Hình ảnh 2. Chúng tôi đã thêm

frame.grid[row=x, column=y padx=10 pady=10]  # line 13
0và
frame.grid[row=x, column=y padx=10 pady=10]  # line 13
1, với 10 pixel này được thêm vào bên trong đường viền của tiện ích và nó đã bắt đầu trông lớn hơn

Hình ảnh 3. Chúng tôi đã thêm

frame.grid[row=x, column=y padx=10 pady=10]  # line 13
2 và
frame.grid[row=x, column=y padx=10 pady=10]  # line 13
3, với 10 pixel này được thêm vào bên ngoài đường viền của tiện ích và kết quả là các tiện ích khác phải di chuyển ra xa

Hình 4. Hình ảnh thứ tư là hình ảnh cuối cùng và mã nguồn giống nhau được cung cấp bên dưới. Trong phần này, chúng tôi đã áp dụng cả phần đệm, do đó nút 5 trông lớn hơn và các tiện ích khác được dịch chuyển 10 pixel

Lưới Tkinter của Python

Đoạn mã cho sơ đồ trên

Đây là đoạn mã cho chương trình nói trên. Trong mã này, chúng tôi đã cung cấp cả chiều rộng vật dụng bên trong và bên ngoài. Vì vậy, mã này sẽ tạo đầu ra trên hình ảnh thứ tư. Mã chính xác có sẵn trên dòng 15

from tkinter import *

ws = Tk[]
ws.title['PythonGuides']
ws.geometry['400x300']
ws.config[bg='#F2B33D']

frame = Frame[ws, bg='#F2B33D']

Button[frame, text="7"].grid[row=0, column=0, sticky='ew']
Button[frame, text="8"].grid[row=0, column=1]
Button[frame, text="9"].grid[row=0, column=2]

Button[frame, text="4 "].grid[row=1, column=0]
Button[frame, text="5"].grid[row=1, column=1, ipadx=10, ipady=10, padx=10, pady=10]
Button[frame, text="6"].grid[row=1, column=2]

Button[frame, text="7 "].grid[row=2, column=0]
Button[frame, text="8"].grid[row=2, column=1]
Button[frame, text="9"].grid[row=2, column=2]

frame.pack[expand=True] 

ws.mainloop[]

Khoảng cách cột lưới Tkinter của Python

  • Lưới trong Python Tkinter cung cấp các cột bằng cách sử dụng mà chúng ta có thể hợp nhất hai hoặc nhiều ô thành một
  • columnpan rất hữu ích trong trường hợp bạn cần thêm dung lượng cho một tiện ích cụ thể
  • columnpan chấp nhận một số nguyên làm đối số và hợp nhất cùng một số ô với nhau
Khoảng cách cột lưới Tkinter của Python

Đoạn mã

Trong mã này, trực tuyến 14, chúng tôi đã sử dụng cộtpan=3, nó đã hợp nhất ba ô thành một và hiển thị nút cho nó. Nút được mở rộng đến không gian có sẵn vì chúng tôi đã đặt sticky=’ew’

from tkinter import *

ws = Tk[]
ws.title['PythonGuides']
ws.geometry['400x300']
ws.config[bg='#F2B33D']

frame = Frame[ws, bg='#F2B33D']

Button[frame, text="These buttons"].grid[row=0, column=0]
Button[frame, text="are positioned"].grid[row=0, column=1]
Button[frame, text="using Grid"].grid[row=0, column=2]

Button[frame, text="another line"].grid[row=1, columnspan=3, sticky='ew']


frame.pack[expand=True] 

ws.mainloop[]

Khoảng cách lưới Tkinter trong Python

  • Lưới trong Python Tkinter cung cấp tùy chọn đệm bằng cách sử dụng không gian có thể được thêm vào bên trong cũng như bên ngoài đường viền của tiện ích
  • Trong khi tổ chức một tiện ích đôi khi kích thước hoặc vị trí mặc định của tiện ích không đáp ứng được kỳ vọng của nhà phát triển
  • Tại thời điểm đó, bằng cách sử dụng phần đệm, nhà phát triển sẽ điều chỉnh tiện ích. Có hai loại đệm
    • Đệm bên trong đường viền của widget
    • Đệm bên ngoài đường viền của widget
  • ipadx, ipady được sử dụng để thêm khoảng trắng theo chiều ngang và chiều dọc bên trong đường viền của tiện ích. padx, pady được sử dụng để thêm khoảng trắng theo chiều ngang và chiều dọc bên ngoài đường viền của tiện ích
  • Tham khảo Python Tkinter Grid Padding để xem ví dụ

Lưới Tkinter của Python không hoạt động

Trong phần này, chúng ta sẽ thảo luận về các lỗi hoặc lỗi phổ biến do Python Tkinter Grid không hoạt động

  • Giá trị của Columnspan không được lớn hơn tổng số cột. Nếu bạn có 5 cột trong ứng dụng thì số cột tối đa có thể hợp nhất là 5. Trong trường hợp bạn đã nhập nhiều hơn 5 thì nó sẽ chỉ hợp nhất cho đến 5 thôi

Mở rộng lưới Tkinter trong Python

  • Lưới trong Python Tkinter cung cấp một dính sử dụng tiện ích có thể được mở rộng theo hướng X & Y. Các trình quản lý Bố cục khác như Địa điểm và Gói có tùy chọn mở rộng bằng cách sử dụng tiện ích con nào có thể được phép mở rộng
    frame.grid[row=x, column=y padx=10 pady=10]  # line 13
    
    4
  • Sticky yêu cầu chữ cái đầu tiên của hướng chung ở dạng chữ thường để đặt tiện ích theo hướng lựa chọn. Dưới đây là các tùy chọn
    • dính = 'e'. Căn sang phải
    • dính = 'w'. Căn chỉnh sang trái dính = 'n'. Căn chỉnh lên trên dính = ‘s’. Căn chỉnh xuống dưới

Bằng cách cung cấp sự kết hợp của các hướng, chúng tôi có thể đặt tiện ích trong không gian có sẵn. Ví dụ bạn muốn điền vào vị trí X của widget thì gõ.

grid[row=0, column=1, sticky='w']
0. ở đây, 'e' sẽ che hướng đông của tiện ích và 'w' sẽ che hướng tây

Điền vào lưới Tkinter của Python

  • Lưới trong Python Tkinter cung cấp một dính sử dụng tiện ích có thể được mở rộng theo hướng X & Y. Các trình quản lý Bố cục khác như Địa điểm và Gói có tùy chọn điền bằng cách sử dụng tiện ích nào có thể được phép mở rộng trong không gian có sẵn nếu mở rộng =True
  • Sticky yêu cầu chữ cái đầu tiên của hướng chung ở dạng chữ thường để đặt tiện ích theo hướng lựa chọn. Dưới đây là các tùy chọn
    • dính = 'e'. Căn sang phải
    • dính = 'w'. Căn trái
    • dính = 'n'. Căn chỉnh lên trên
    • dính = 's'. Căn chỉnh xuống dưới
  • Bằng cách cung cấp sự kết hợp của các hướng, chúng tôi có thể đặt tiện ích trong không gian có sẵn. Ví dụ bạn muốn điền vào vị trí X của widget thì gõ.
    grid[row=0, column=1, sticky='w']
    0. ở đây, 'e' sẽ che hướng đông của tiện ích và 'w' sẽ che hướng tây

Ví dụ về Grid Fill trong Python Tkinter

Trong mã này, chúng tôi đã triển khai điền vào lưới trong Python Tkinter. Lưới luôn bắt đầu từ góc trên cùng bên trái của màn hình, vì vậy chúng tôi đã tạo một khung, đặt khung đó ở giữa, sau đó chúng tôi đã tạo các nút bằng trình quản lý bố cục lưới. Ở dòng 11, 12 chúng tôi đã sử dụng nút dính để kéo dài nút theo hướng trái phải

from tkinter import *

ws = Tk[]
ws.title['PythonGuides']
ws.geometry['400x300']
ws.config[bg='#F2B33D']

frame = Frame[ws, bg='#F2B33D']

Button[frame, text="These buttons"].grid[row=0, column=0]
Button[frame, text="are positioned"].grid[row=0, column=1]
Button[frame, text="using Grid"].grid[row=0, column=2]

Button[frame, text="This is "].grid[row=1, column=0, sticky='ew']
Button[frame, text="another line"].grid[row=1, column=1, sticky='ew']
Button[frame, text="using Grid"].grid[row=1, column=2]

frame.pack[expand=True] 

ws.mainloop[]

đầu ra

Trong kết quả này, các nút được hiển thị trên màn hình bằng lưới trong Python Tkinter. Các nút kéo nhỏ vì số lượng từ ít hơn. Vì vậy, để lấp đầy khoảng trống xấu xí đó, chúng tôi đã sử dụng sticky=’ew’ trên hai nút đó. Bây giờ bạn có thể thấy trong hình bên phải rằng tất cả các nút được sắp xếp và không có khoảng trống

Điền vào lưới Tkinter của Python

Trong hướng dẫn này, chúng ta đã tìm hiểu mọi thứ về Grid Layout Manager trong Python Tkinter. Ngoài ra, chúng tôi đã đề cập đến các chủ đề này

  • Python Tkinter
  • Cách sử dụng phương thức grid[] trong Python Tkinter
  • Ví dụ bố cục lưới Tkinter trong Python
  • Python Tkinter Lưới căn trái
  • Chức năng lưới Tkinter của Python
  • Đệm lưới Python Tkinter
  • Khoảng cách cột lưới Tkinter của Python
  • Khoảng cách lưới Tkinter trong Python
  • Lưới Tkinter của Python không hoạt động
  • Mở rộng lưới Tkinter trong Python
  • Điền vào lưới Tkinter của Python

Bijay Kumar

Python là một trong những ngôn ngữ phổ biến nhất ở Hoa Kỳ. Tôi đã làm việc với Python trong một thời gian dài và tôi có kinh nghiệm làm việc với nhiều thư viện khác nhau trên Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, v.v… Tôi có kinh nghiệm làm việc với nhiều khách hàng khác nhau . Kiểm tra hồ sơ của tôi

Làm cách nào để tạo lưới trong Python?

Để tạo lưới, bạn cần sử dụng. Phương thức grid[] cho phép bạn chỉ định vị trí hàng và cột trong danh sách tham số của nó. Cả hàng và cột bắt đầu từ chỉ số 0. Ví dụ lưới[hàng=1, cột=2] chỉ định một vị trí trên cột thứ ba và hàng thứ hai của khung hoặc cửa sổ của bạn

Bạn có thể sử dụng lưới với khung Tkinter không?

Tkinter có thể hỗ trợ tạo nhiều widget trong cùng một khung . Không chỉ điều này, nó còn hỗ trợ một cơ chế để sắp xếp chúng tương đối với nhau.

Bạn có thể kết hợp gói và lưới Tkinter không?

Không kết hợp các phương thức grid[] và pack[] . Ứng dụng sẽ đóng băng khi cố gắng tìm ra cách để hai trình quản lý này hoạt động cùng nhau. side -- chỉ định vị trí chung của widget trong cửa sổ, các đối số là 'top' , 'bottom' , 'left' , 'right' [mặc định là 'top' ].

Chúng tôi có thể tạo bảng trong Tkinter không?

Thật không may, Tkinter không cung cấp tiện ích Bảng để tạo bảng . Nhưng chúng ta có thể tạo một bảng bằng các phương pháp thay thế. Ví dụ: chúng ta có thể tạo một bảng bằng cách hiển thị liên tục các tiện ích mục nhập ở dạng hàng và cột.

Chủ Đề