Выравнивание внутри блока
Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 12 из 30.
Center помещает дочерний элемент в середину доступного пространства. Align делает то же самое для любого выбранного вами места:
Container(
height: 200,
color: Colors.teal,
child: const Align(
alignment: Alignment.topRight,
child: Text('Top right'),
),
)Места названы по углам и краям: Alignment.topLeft, topCenter, topRight, centerLeft, center, centerRight, bottomLeft, bottomCenter и bottomRight. Center — это Align с Alignment.center.
У Stack также есть параметр alignment:, который задаёт положение каждого дочернего элемента, не являющегося Positioned: Stack(alignment: Alignment.bottomCenter, children: [...]).
Задание
ЛегкоПеремести подпись Mountains из середины обложки в её левый нижний угол. Отступ оставляет её на расстоянии 16 пикселей от обоих краёв.
Попробуйте сами
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(
appBar: AppBar(title: const Text('Travel')),
body: Column(
children: [
Container(
height: 240,
color: Colors.indigo,
child: const Center(
child: Padding(
padding: EdgeInsets.all(16),
child: Text(
'Mountains',
style: TextStyle(fontSize: 28, color: Colors.white),
),
),
),
),
],
),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Адаптивная компоновка
1Совместное размещение в строке
Expanded заполняет строкуДелим пространство с flexFlexible подстраивается под размер дочернего элементаSpacer раздвигает элементы2Ошибка переполнения
Ошибка переполненияИсправление переполнения: расширениеИсправление переполнения: прокруткаИсправление переполнения: переносИнтервалы внутри переноса5Перечисления и switch
Перечисления для типов экрановКонструкция switch с перечислениемВыражения switch3Компоновка виджетов в стопку
Расположить виджеты друг над другомРазмещение в углуВыравнивание внутри блокаSafeArea и вырез экранаПотренируйтесь самостоятельно: Онлайн-компилятор Flutter