Spacer раздвигает элементы
Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 4 из 30.
В верхней панели часто слева размещают логотип, а справа — ссылки. Spacer делает именно это: это пустой виджет, который занимает всё оставшееся место в строке и сдвигает всё, что находится после него, к другому краю.
Row(
children: [
const Text('Logo'),
const Spacer(),
const Text('Cart'),
],
)Spacer размещается именно там, где должен быть промежуток. Виджеты перед ним остаются слева, виджеты после него перемещаются вправо, а расстояние между соседними виджетами с одной стороны остаётся таким, каким вы его задали.
mainAxisAlignment: MainAxisAlignment.spaceBetween вместо этого равномерно распределяет все дочерние элементы. Используйте Spacer, когда нужно увеличить только один промежуток.
Задание
ЛегкоОставь Coddy слева, а Help и Log in перемести к правому краю, сохранив расстояние между ними 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(
body: Padding(
padding: const EdgeInsets.fromLTRB(16, 48, 16, 16),
child: Column(
children: [
Row(
children: [
const Text(
'Coddy',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const Text('Help'),
const SizedBox(width: 16),
const Text('Log in'),
],
),
],
),
),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Адаптивная компоновка
1Совместное размещение в строке
Expanded заполняет строкуДелим пространство с flexFlexible подстраивается под размер дочернего элементаSpacer раздвигает элементыПотренируйтесь самостоятельно: Онлайн-компилятор Flutter