用 Expanded 解决溢出

本课属于 Coddy Flutter 学习旅程的“适配不同屏幕的布局”单元。第 6 课，共 30 课。

Row 中的 Text 想要显示为一整行。当文本长度超过这一行时，即使文本本可以换行，内容还是会从右侧溢出。

文本不会换行，是因为这一行允许每个子组件随意设置宽度。用 Expanded 包裹文本后，它就会获得一个宽度，正好是其他子组件剩余的空间。文本有了宽度后，就会换成多行显示。

Row(
  children: [
    const Icon(Icons.info),
    const Expanded(
      child: Text('A long sentence that now wraps instead of spilling out.'),
    ),
  ],
)

这是修复右侧溢出的第一个方法：给需要缩小的子组件添加 Expanded。如果包裹的是已经很小的组件，比如图标，并不会改变长文本的显示方式。

挑战

简单

配送地址超出了右侧边缘。让它换成多行显示，同时让箭头保持在这一行的最右侧。

亲手试试

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('Delivery')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              Row(
                children: [
                  const Icon(Icons.location_on, color: Colors.red),
                  const SizedBox(width: 8),
                  const Text(
                    '221B Baker Street, Marylebone, London NW1 6XE, United Kingdom',
                  ),
                  const Icon(Icons.chevron_right),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}