如何在Semantics树中将Flutter小部件划分为单独的节点

Question

我创建了一个自定义小部件来表示ListView中的瓦片，下面包括一个示例。瓦片包含一个Inkwell，以便可以对其进行轻敲。瓦片还包含一个MaterialButton。我已经相应地将所有内容封装在Semantics中，但每当启用Talkback并点击互动程序时，整个互动程序都会高亮显示。这使得里面的按钮无法点击。

如何将每个Widget视为Semantics树中的单个节点？MergeSemantics文档(https://api.flutter.dev/flutter/widgets/MergeSemantics-class.html)似乎意味着CCD_ 8应该单独处理，除非它们被包裹在CCD_。

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ListView(
children: [Tile()],
),
),
);
}
}
class Tile extends StatelessWidget {
@override
Widget build(BuildContext context) => Padding(
padding: EdgeInsets.only(top: 12),
child: InkWell(
onTap: () => print('Tile tapped'),
child: _tile(),
),
);
Widget _tile() => Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
border: Border.all(color: Colors.grey, width: 1),
shape: BoxShape.rectangle,
),
child: Row(
children: [
_textAndCount(),
SizedBox(width: 12),
_button(),
],
),
);
Widget _textAndCount() => Expanded(
child: Column(
children: [
SizedBox(
width: double.infinity,
child: _text(),
),
_count(),
],
),
);
Widget _text() => Text(
'text',
overflow: TextOverflow.ellipsis,
maxLines: 2,
textAlign: TextAlign.start,
);
Widget _count() =>
Padding(
padding: EdgeInsets.only(top: 12),
child: Row(
children: [
Semantics(
label: '0 things',
child: ExcludeSemantics(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 12),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.grey,
borderRadius: BorderRadius.circular(10),
),
child: Text('0'),
),
),
),
],
),
);
Widget _button() => Semantics(
label: 'button',
button: true,
child: Tooltip(
message: 'button',
excludeFromSemantics: true,
child: ExcludeSemantics(
child: MaterialButton(
onPressed: () => print('Button tapped'),
child: Container(
child: SizedBox(
height: 44,
width: 44,
child: Icon(Icons.add),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 2),
shape: BoxShape.circle,
),
),
),
),
),
);
}

Answer 1

在Flutter GitHub repo上发布了一个问题，得到了以下回复：https://github.com/flutter/flutter/issues/54725.

事实证明，Semantics窗口小部件有一个container属性，当设置为true时，包装的对象在Semantics树中表现为自己的节点。