Menu
CoddyTech

Выравнивание по левому краю

Часть раздела Ваше первое приложение путешествия по Flutter на Coddy. Урок 23 из 32.

Другое направление Column — поперёк неё — называется поперечной осью. По умолчанию каждый дочерний элемент выравнивается по центру поперёк колонки, поэтому короткая и длинная строки начинаются не в одном и том же месте.

crossAxisAlignment: меняет это выравнивание:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

В Column значение CrossAxisAlignment.start выравнивает дочерние элементы по левому краю, end — по правому, а center используется по умолчанию.

challenge icon

Задание

Легко

Сделай так, чтобы обе строки начинались у одного и того же левого края, используя crossAxisAlignment: столбца.

Попробуйте сами

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: Center(
          child: Column(
            children: [
              Text('Name', style: TextStyle(fontSize: 24)),
              Text('A much longer line', style: TextStyle(fontSize: 24)),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconПроверьте себя

В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.

Все уроки раздела Ваше первое приложение

Потренируйтесь самостоятельно: Онлайн-компилятор Flutter