Flutter: Tìm hiểu về widget Row và Column
Trong Flutter, có hai widget quan trọng giúp bạn xây dựng giao diện người dùng một cách linh hoạt và dễ dàng. “Row” cho phép bạn xếp các thành phần ngang hàng, trong khi “Column” cho phép xếp chúng dọc theo trục dọc. Bằng cách kết hợp hai widget này cùng với các widget khác, bạn có thể tạo ra các ứng dụng di động đa dạng và ấn tượng.
1. Những điểm chính
- Các widget Hàng và Cột là các mẫu bố cục được sử dụng phổ biến nhất trong ứng dụng Flutter.
- Cả hai đều có thể giữ một số widget con.
- Một widget con cũng có thể là một widget hàng hoặc cột.
- Chúng tôi có thể kéo dài hoặc hạn chế một widget cụ thể dành cho các widget con.
- Flutter cũng cho phép các nhà phát triển chỉ định cách các widget con có thể sử dụng không gian có sẵn của các widget hàng và cột.
2. Widget Row
Widget này sắp xếp các con của nó theo hướng nằm ngang trên màn hình . Nói cách khác, nó sẽ mong đợi các widget con trong một mảng ngang. Nếu widget cần lấp đầy không gian ngang có sẵn, chúng ta phải bọc các widget trong widget mở rộng.
Widget row có vẻ không cuộn được vì nó hiển thị các widget trong chế độ xem và hiển thị toàn bộ. Vì vậy, sẽ được coi là sai nếu chúng ta có nhiều widget cob hơn trong một hàng sẽ không phù hợp với không gian có sẵn. Nếu chúng ta muốn tạo một danh sách các widget hàng có thể cuộn được, chúng ta cần sử dụng widget ListView.
Chúng ta có thể kiểm soát cách một widget hàng căn chỉnh các con của nó dựa trên lựa chọn của chúng tôi bằng cách sử dụng thuộc tính crossAxisAlignment và mainAxisAlignment . Trục chéo của hàng sẽ chạy theo chiều dọc và trục chính sẽ chạy theo chiều ngang . Xem hình ảnh minh họa bên dưới để hiểu rõ hơn.
Lưu ý: widget hàng Flutter có một số thuộc tính khác như mainAxisSize, textDirection, verticalDirection, v.v. Ở đây, chúng ta sẽ chỉ thảo luận về các thuộc tính mainAxisAlignment và crossAxisAlignment.
Chúng ta có thể căn chỉnh widget của hàng với sự trợ giúp của các thuộc tính sau:
- start: Nó sẽ đặt các con từ điểm bắt đầu của trục chính.
- end: Nó sẽ đặt các con ở cuối trục chính.
- center: Nó sẽ đặt các con ở giữa trục chính.
- spaceBetween: Nó sẽ đặt không gian trống giữa các con một cách đồng đều.
- spaceAround: Nó sẽ đặt không gian trống giữa các con một cách đồng đều và một nửa không gian đó trước và sau widget con đầu tiên và cuối cùng.
- spaceEvenly: Nó sẽ đặt không gian trống giữa các con một cách đồng đều và trước và sau widget con đầu tiên và cuối cùng.
Hãy để chúng ta hiểu điều đó với sự trợ giúp của một ví dụ mà chúng ta sẽ sắp xếp nội dung sao cho có khoảng cách đồng đều xung quanh các con trong một hàng:
3.Widget Column
Widget này sắp xếp các con của nó theo hướng dọc trên màn hình . Nói cách khác, nó sẽ mong đợi một mảng dọc gồm các widget con. Nếu widget cần lấp đầy không gian dọc có sẵn, chúng ta phải bọc các widget trong widget mở rộng.
Một widget dạng cột không thể cuộn được vì nó hiển thị các widget trong chế độ xem hiển thị đầy đủ. Vì vậy, sẽ được coi là sai nếu chúng ta có nhiều con hơn trong một cột sẽ không phù hợp với không gian có sẵn. Nếu chúng ta muốn tạo một danh sách các widget cột có thể cuộn được, chúng ta cần sử dụng ListView Widget.
Chúng ta cũng có thể kiểm soát cách một widget cột sắp xếp các con của nó bằng cách sử dụng thuộc tính mainAxisAlignment và crossAxisAlignment. Trục chéo của cột sẽ chạy theo chiều ngang và trục chính sẽ chạy theo chiều dọc . Hình ảnh minh họa dưới đây giải thích rõ ràng hơn.
ảnh
Lưu ý: widget cột cũng căn chỉnh nội dung của nó bằng cách sử dụng các thuộc tính tương tự như chúng ta đã thảo luận trong widget hàng như bắt đầu, kết thúc, giữa, khoảng trắng, khoảng trắng và khoảng trắng.
Hãy để chúng ta hiểu điều đó với sự trợ giúp của một ví dụ trong đó chúng ta sẽ căn chỉnh nội dung sao cho có một khoảng trống giữa các phần tử con đều nhau trong một cột:
Flutter cũng cho phép các nhà phát triển căn chỉnh widget với sự kết hợp của crossAxisAlignment và mainAxisAlignment cho cả widget hàng và cột . Chúng ta hãy lấy ví dụ ở trên về widget cột, nơi chúng ta sẽ đặt mainAxisAlignment là MainAxisAlignment.spaceAround và crossAxisAlignment là CrossAxisAlignment.stretch. Nó sẽ làm cho chiều cao của cột bằng với chiều cao của cơ thể. Xem ảnh chụp màn hình bên dưới.
4. Hạn chế của widget row và column
- Widget row trong Flutter không có tính năng cuộn theo chiều ngang. Vì vậy, nếu chúng ta đã chèn một số lượng lớn con trong một hàng mà không thể vừa với hàng đó, chúng ta sẽ thấy thông báo Overflow.
- Widget column trong Flutter không có tính năng cuộn dọc. Vì vậy, nếu chúng tôi đã chèn một số lượng lớn widget con trong một cột duy nhất có tổng kích thước widget con không bằng chiều cao của màn hình, chúng ta sẽ thấy thông báo Overflow.
Leave a Reply
Want to join the discussion?Feel free to contribute!