Я создал собственный виджет для представления плитки в ListView
, пример которого приведен ниже. Плитка содержит Inkwell
, так что ее можно нажать. Плитка также содержит MaterialButton
. Я все обернул в Semantics
соответственно, но всякий раз, когда Talkback включен, и я нажимаю на плитку, вся плитка подсвечивается. Это делает невозможным нажатие кнопки внутри.
Как мне обработать каждый Widget
как отдельный узел в дереве Semantics
? Документация MergeSemantics
(https://api.flutter.dev/flutter/widgets/MergeSemantics-class.html), по-видимому, подразумевает, что с Widgets
следует обращаться индивидуально, если они не заключены в MergeSemantics
.
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,
),
),
),
),
),
);
}