Spacer 将内容推开

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 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'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}