可滚动 AlertDialog（不再弃用）
概述
#AlertDialog 现在在溢出时会自动滚动。
背景
#在此更改之前，当 AlertDialog 小部件的内容过高时，显示会溢出，导致内容被裁剪。这会产生以下问题：
- 无法查看被裁剪的内容部分。
- 大多数警报对话框在内容下方都有按钮，以提示用户进行操作。如果内容溢出，遮挡了按钮，用户可能不知道它们的存在。
变更说明
#以前的方法将标题和小部件连续列在 Column 小部件中。
dart
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (title != null)
Padding(
padding: titlePadding ?? EdgeInsets.fromLTRB(24, 24, 24, content == null ? 20 : 0),
child: DefaultTextStyle(
style: titleTextStyle ?? dialogTheme.titleTextStyle ?? theme.textTheme.title,
child: Semantics(
child: title,
namesRoute: true,
container: true,
),
),
),
if (content != null)
Flexible(
child: Padding(
padding: contentPadding,
child: DefaultTextStyle(
style: contentTextStyle ?? dialogTheme.contentTextStyle ?? theme.textTheme.subhead,
child: content,
),
),
),
// ...
],
);新方法将这两个小部件包装在按钮栏上方的 SingleChildScrollView 中，使这两个小部件成为同一可滚动组件的一部分，并将按钮栏暴露在对话框底部。
dart
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (title != null || content != null)
SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
if (title != null)
titleWidget,
if (content != null)
contentWidget,
],
),
),
// ...
],
),迁移指南
#由于此更改，您可能会遇到以下问题：
- 语义测试可能会因添加
SingleChildScrollView而失败。 对
Talkback和VoiceOver功能的手动测试表明，它们仍然表现出与之前相同的（正确）行为。- 金色测试可能会失败。
此更改可能导致（先前通过的）金色测试出现差异，因为
SingleChildScrollView现在嵌套了标题和小部件。一些 Flutter 项目已采取措施，通过对 Flutter 调试构建中使用的语义节点进行金色快照来创建语义测试。
任何反映滚动容器添加的语义金色更新都是预期中的，并且这些差异可以安全地接受。生成的语义树示例
flutter: ├─SemanticsNode#30 <-- SingleChildScrollView
flutter: │ flags: hasImplicitScrolling
flutter: │ scrollExtentMin: 0.0
flutter: │ scrollPosition: 0.0
flutter: │ scrollExtentMax: 0.0
flutter: │
flutter: ├─SemanticsNode#31 <-- title
flutter: │ flags: namesRoute
flutter: │ label: "Hello"
flutter: │
flutter: └─SemanticsNode#32 <-- contents
flutter: label: "Huge content"- 由于滚动视图，布局可能会发生变化。
如果对话框已经溢出，此更改将解决该问题。此布局更改是预期的。
如果AlertDialog.content中嵌套的SingleChildScrollView被保留在代码中，它应该能正常工作，但如果不是故意的，则应将其删除，因为它可能会引起混淆。
迁移前的代码
dart
AlertDialog(
title: Text(
'Very, very large title that is also scrollable',
textScaleFactor: 5,
),
content: SingleChildScrollView( // won't be scrollable
child: Text('Scrollable content', textScaleFactor: 5),
),
actions: <Widget>[
TextButton(child: Text('Button 1'), onPressed: () {}),
TextButton(child: Text('Button 2'), onPressed: () {}),
],
)迁移后的代码
dart
AlertDialog(
title: Text('Very, very large title', textScaleFactor: 5),
content: Text('Very, very large content', textScaleFactor: 5),
actions: <Widget>[
TextButton(child: Text('Button 1'), onPressed: () {}),
TextButton(child: Text('Button 2'), onPressed: () {}),
],
)时间线
#发布版本: 1.16.3
稳定版本: 1.17
参考资料
#设计文档
API 文档
相关议题
相关 PR