Trong Flutter, việc sắp xếp các widget trong không gian bố cục là rất quan trọng để tạo ra giao diện người dùng hấp dẫn và dễ sử dụng. Hai thuộc tính quan trọng thường được sử dụng để kiểm soát cách mà các widget con được bố trí trong một widget bố cục như Row hoặc Column là mainAxisAlignment và crossAxisAlignment. Trong bài viết này, chúng ta sẽ tìm hiểu về hai thuộc tính này, khi nào nên sử dụng chúng và cách áp dụng chúng vào trong mã.
mainAxisAlignment: Thuộc tính này dùng để xác định cách mà các widget con được sắp xếp trên trục chính (trục mà widget đang hoạt động). Đối với Row, trục chính là chiều ngang; đối với Column, trục chính là chiều dọc.crossAxisAlignment: Thuộc tính này dùng để xác định cách mà các widget con được sắp xếp trên trục chéo (trục vuông góc với trục chính). Đối với Row, trục chéo là chiều dọc; đối với Column, trục chéo là chiều ngang.mainAxisAlignment và crossAxisAlignmentmainAxisAlignment:
mainAxisAlignment.crossAxisAlignment:
Row.crossAxisAlignment.mainAxisAlignment và crossAxisAlignmentDưới đây là một ví dụ cụ thể để minh họa cách sử dụng cả hai thuộc tính này trong một ứng dụng Flutter.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Ví dụ về mainAxisAlignment và crossAxisAlignment'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center, // Căn giữa theo chiều dọc
crossAxisAlignment: CrossAxisAlignment.stretch, // Căn đều theo chiều ngang
children: <Widget>[
Container(
color: Colors.red,
height: 100,
child: Center(child: Text('Widget 1')),
),
Container(
color: Colors.green,
height: 50,
child: Center(child: Text('Widget 2')),
),
Container(
color: Colors.blue,
height: 75,
child: Center(child: Text('Widget 3')),
),
],
),
),
);
}
}
Column: Chúng ta sử dụng widget Column để sắp xếp các widget con theo chiều dọc.mainAxisAlignment: MainAxisAlignment.center: Các widget con sẽ được căn giữa theo chiều dọc trong Column.crossAxisAlignment: CrossAxisAlignment.stretch: Các widget con sẽ được mở rộng để lấp đầy chiều ngang của Column, giúp chúng có cùng độ rộng.Container: Mỗi widget con là một Container có màu sắc khác nhau, cho phép dễ dàng nhìn thấy cách mà các widget được sắp xếp.mainAxisAlignment và crossAxisAlignmentmainAxisAlignment và crossAxisAlignment là hai thuộc tính mạnh mẽ trong Flutter giúp bạn kiểm soát cách bố trí các widget con trong các widget như Row và Column. Sử dụng đúng cách sẽ giúp tạo ra giao diện người dùng đẹp mắt và dễ sử dụng.
