`CrossAxisAlignment` là một thuộc tính trong `Column` (cũng như `Row`) trong Flutter, dùng để sắp xếp các widget con dọc theo trục chéo của `Column` (trục ngang).
Các Giá Trị của `CrossAxisAlignment`
1: CrossAxisAlignment.start
- Căn các widget con theo đầu trục chéo (trục ngang) bên trái.
- Code : Trong ví dụ này, tất cả các widget con sẽ được căn theo đầu trục chéo (trục ngang) bên trái.
- Kết quả :
2. CrossAxisAlignment.end
- Căn các widget con theo cuối trục chéo (trục ngang) bên phải.
- Code : Trong ví dụ này, tất cả các widget con sẽ được căn theo cuối trục chéo (trục ngang) bên phải.
- Kết quả :
3. CrossAxisAlignment.center
- Căn các widget con theo giữa trục chéo (trục ngang).
- Code : Trong ví dụ này, tất cả các widget con sẽ được căn giữa theo trục chéo (trục ngang).
- Kết quả :
4. CrossAxisAlignment.stretch
- Kéo dãn các widget con để chiếm toàn bộ không gian có sẵn dọc theo trục chéo (trục ngang).
- Code : Trong ví dụ này, tất cả các widget con sẽ được kéo dãn để chiếm toàn bộ không gian dọc theo trục chéo (trục ngang).
+ kéo dãn phần tử và kết hợp code mainAxisAlignment để kéo phần tử ra :
- Kết quả :
5. CrossAxisAlignment.baseline
- Căn các widget con theo đường cơ sở của văn bản. Cần thiết phải xác định `textBaseline`.
- Code :
- Kết quả :
Tổng Kết
- `CrossAxisAlignment.start` : Căn các widget con theo đầu trục chéo (trục ngang) bên trái.
- `CrossAxisAlignment.end`: Căn các widget con theo cuối trục chéo (trục ngang) bên phải.
- `CrossAxisAlignment.center` : Căn các widget con theo giữa trục chéo (trục ngang).
- `CrossAxisAlignment.stretch`: Kéo dãn các widget con để chiếm toàn bộ không gian có sẵn dọc theo trục chéo (trục ngang).
- `CrossAxisAlignment.baseline`: Căn các widget con theo đường cơ sở của văn bản (cần xác định `textBaseline`).
Cách sử dụng thuộc tính `CrossAxisAlignment` sẽ phụ thuộc vào thiết kế giao diện và yêu cầu cụ thể của ứng dụng Flutter.
Post a Comment