Flutter: Đối phó với các ràng buộc hộp

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Lưu ý: Bạn có thể được chuyển hướng đến trang này nếu khung phát hiện sự cố liên quan đến các ràng buộc hộp.

Lưu ý: Nếu bạn bối rối về cách hoạt động của các ràng buộc, định cỡ và định vị trong Flutter, hãy xem Hiểu về các ràng buộc.

Trong Flutter, các widget được hiển thị bởi các đối tượng RenderBox bên dưới của chúng. Các hộp kết xuất được cung cấp bởi các ràng buộc bởi cha của chúng và chính kích thước trong các ràng buộc đó. Ràng buộc bao gồm chiều rộng và chiều cao tối thiểu và tối đa; kích thước bao gồm chiều rộng và chiều cao cụ thể.

Nói chung, có ba loại hộp về cách chúng xử lý các ràng buộc của chúng:

  • Cố gắng càng lớn càng tốt. Ví dụ, các hộp được sử dụng bởi Center và ListView.
  • Cố gắng có cùng kích thước với con của chúng. Ví dụ, các hộp được sử dụng bởi Transform và Opacity.
  • Những người cố gắng có một kích thước cụ thể. Ví dụ, các hộp được sử dụng bởi Image và Text.

Ví dụ Container, một số widget khác nhau giữa các loại dựa trên các đối số phương thức khởi tạo của chúng. Trong trường hợp của Container, nó sẽ mặc định là cố gắng lớn nhất có thể, nhưng nếu bạn cho nó một width chẳng hạn, thì nó sẽ cố gắng tôn trọng điều đó và có kích thước cụ thể đó.

Những điều khác, ví dụ như Row và Column (hộp flex) khác nhau dựa trên các ràng buộc mà chúng được đưa ra, như được mô tả bên dưới đây trong phần Flex.

Các ràng buộc đôi khi là “chặt chẽ”, nghĩa là chúng không để lại chỗ cho hộp kết xuất quyết định kích thước (ví dụ: nếu chiều rộng tối thiểu và tối đa bằng nhau, nó được cho là có chiều rộng hẹp). Một ví dụ về điều này là widget App, được chứa bởi lớp RenderView: hộp được sử dụng bởi hàm con được trả về bởi hàm build của ứng dụng có một ràng buộc buộc nó phải lấp đầy chính xác vùng nội dung của ứng dụng (thông thường, toàn bộ màn hình). Nhiều hộp trong Flutter, đặc biệt là những hộp chỉ lấy một con duy nhất, vượt qua hạn chế của chúng cho con cái của chúng. Điều này có nghĩa là nếu bạn lồng một loạt các hộp vào bên trong nhau ở gốc của cây kết xuất của ứng dụng, thì tất cả chúng sẽ hoàn toàn khớp với nhau, bị ép buộc bởi những ràng buộc chặt chẽ này.

Một số hộp lỏng lẻo các ràng buộc, có nghĩa là mức tối đa được duy trì nhưng mức tối thiểu bị loại bỏ, ví dụ như Center.

Ràng buộc không giới hạn

Trong một số tình huống nhất định, ràng buộc được cung cấp cho một hộp là không giới hạn hoặc vô hạn. Điều này có nghĩa là chiều rộng tối đa hoặc chiều cao tối đa được đặt thành double.INFINITY.

Một hộp cố gắng càng lớn càng tốt sẽ không hoạt động hữu ích khi được cung cấp một ràng buộc không giới hạn và trong chế độ gỡ lỗi, sự kết hợp như vậy sẽ ném ra một ngoại lệ trỏ đến tệp này.

Các trường hợp phổ biến nhất trong đó hộp kết xuất tự tìm thấy các ràng buộc không bị ràng buộc là trong các hộp linh hoạt (Row và Column) và trong các vùng có thể cuộn (ListView và các lớp con ScrollView khác).

Đặc biệt, ListView cố gắng mở rộng để phù hợp với không gian có sẵn theo hướng chéo của nó (ví dụ: nếu đó là một khối cuộn theo chiều dọc, nó sẽ cố gắng rộng bằng khối cha của nó). Nếu bạn lồng một cuộn theo chiều dọc ListView bên trong cuộn theo chiều ngang ListView, cuộn bên trong sẽ cố gắng rộng nhất có thể, rộng vô hạn, vì cuộn bên ngoài có thể cuộn theo hướng đó.

Flex

Bản thân các hộp Flex (Row và Column) hoạt động khác nhau dựa trên việc chúng nằm trong các ràng buộc có giới hạn hay các ràng buộc không bị ràng buộc theo hướng đã cho của chúng.

Trong những ràng buộc bị ràng buộc thì chúng cố gắng trở nên lớn nhất có thể theo hướng đó.

Trong những ràng buộc không có giới hạn thì chúng cố gắng để con của chúng đi theo hướng đó. Trong trường hợp này, bạn không thể đặt flex trên con thành bất kỳ giá trị nào khác với 0 (mặc định). Trong thư viện widget thì điều này có nghĩa là bạn không thể sử dụng Expanded khi hộp linh hoạt nằm bên trong hộp linh hoạt khác hoặc bên trong một hộp có thể cuộn. Nếu bạn làm vậy, bạn sẽ nhận được một thông báo ngoại lệ trỏ bạn đến tài liệu này.

Theo hướng chéo , ví dụ, theo chiều rộng cho Column (uốn dọc) hoặc chiều cao cho Row (uốn ngang), chúng bao giờ cũng bị ràng buộc, nếu không chúng sẽ không thể căn chỉnh hợp lý các con của chúng.

Nguồn: flutter.dev
» Tiếp: Thêm tương tác vào ứng dụng Flutter
« Trước: Hiểu về các ràng buộc
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!