Thiết kế responsive với containers

Giới thiệu về Power Apps

Luise Freese

Azure & Power Platform Architect

Vì sao cần responsive?

 

  • Cùng một app mở trên điện thoại, máy tính bảng, laptop
  • Bố cục cố định bị cắt trên màn hình nhỏ, lạc lõng trên màn hình lớn
  • Responsive = bố cục tự thích ứng

$$

Điện thoại, máy tính bảng và laptop hiển thị cùng app đổi bố cục từ một cột sang nhiều cột.

Giới thiệu về Power Apps

Container bố cục hiện đại

Minh họa so sánh Layout container dọc và ngang với các control con xếp chồng so với đặt cạnh nhau.

 

  • Container bố cục dọc: xếp con từ trên xuống dưới
  • Container bố cục ngang: đặt con từ trái sang phải
  • Control hiện đại tự chảy vào không gian trống
Giới thiệu về Power Apps

Chiều rộng và cao linh hoạt

 

  • FlexibleWidth và FlexibleHeight
  • Bật: control giãn để lấp đầy container
  • Tắt: control giữ kích thước cố định

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Giới thiệu về Power Apps

LayoutMinWidth và LayoutMinHeight

Điện thoại vs máy tính bảng minh họa LayoutMinWidth là điểm gãy nơi bố cục đổi từ một cột sang panel cạnh + nội dung.

 

  • Container cần đủ không gian để bố trí đúng
  • LayoutMinWidth = bề rộng nhỏ nhất trước khi tái sắp xếp
  • Kích hoạt bố cục khác cho điện thoại vs. máy tính bảng
Giới thiệu về Power Apps

Cài đặt hiển thị của app

 

  • Settings → Display đặt hướng và kích thước
  • App layout: Fixed cố định theo một tỷ lệ, Responsive thích ứng màn hình
  • Kiểm thử ở nhiều kích thước

$$

Hộp thoại Settings của Power Apps Studio ở tab Display, hiển thị tùy chọn layout, orientation và kích thước canvas

Giới thiệu về Power Apps

Các bố cục định sẵn

Ảnh chụp thật của flyout New screen trong Power Apps Studio với các mẫu bố cục có sẵn: Blank, Split screen, Sidebar, Header and footer, Approval request, và Welcome screen, mỗi mẫu có khung xem trước nhỏ

 

  • + New screen đi kèm mẫu bố cục dựng sẵn
  • Sidebar, Header and footer, Split screen, đã responsive
  • Điểm khởi đầu khuyên dùng cho app responsive đầu tiên của bạn
Giới thiệu về Power Apps

Bạn sẽ xây gì

$$

Bọc controls trong Layout container · Chuyển giữa kích thước thiết bị · Xem app phản hồi

Minh họa một app trên điện thoại, máy tính bảng và laptop, cho thấy gallery thích ứng với từng kích thước màn hình.

Giới thiệu về Power Apps

Cùng luyện tập nào!

Giới thiệu về Power Apps

Preparing Video For Download...