Căn giữa cột

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 22 trên 32.

Column có chiều cao bằng không gian được cấp và đặt các phần tử con ở trên cùng. Thuộc tính mainAxisAlignment: xác định vị trí của chúng dọc theo chiều cao đó, tức là trục chính (main axis) của cột:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [...],
)

MainAxisAlignment.start là phía trên, center là ở giữa và end là phía dưới. spaceEvenly phân bố chúng với khoảng cách bằng nhau. Row có cùng thiết lập này dọc theo chiều rộng.

Trên màn hình, cột này chỉ rộng bằng phần tử con rộng nhất, nên nó nằm bên trái. Hướng đó sẽ được học trong bài học tiếp theo.

Thử thách

Dễ

Ba con số nằm ở phía trên màn hình. Di chuyển chúng xuống giữa màn hình bằng mainAxisAlignment: của cột.

Tự làm thử

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Text('One', style: TextStyle(fontSize: 32)),
            Text('Two', style: TextStyle(fontSize: 32)),
            Text('Three', style: TextStyle(fontSize: 32)),
          ],
        ),
      ),
    );
  }
}