在Flutter web中使用Semantics小部件

Question

如何在Flutter Web中使用Semantics小部件，是否可以将其与自定义小部件一起使用，例如定制的按钮、文本或带有GestureDetector的某些定制容器？我尝试过在应用程序中包装几个小部件，但似乎都不起作用。唯一可用的小部件是TextFormFiled小部件，但它也有一些问题。

一些小部件是否应该是可聚焦的，以便Semantics工作？我也试着增加焦点，但再次没有进展。

这在Flutter网站上可能吗？

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
// showSemanticsDebugger: true,
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Semantics(
label: "Text Widget",
hint: "Some text",
child: Text('Lorem Ipsum'),
),
SizedBox(height: 50),
Semantics(
button: true,
label: "Button Widget",
hint: "Click Button",
child: TextButton(
onPressed: () => {},
child: Text('Click me'),
),
),
SizedBox(height: 50),
Semantics(
textField: true,
label: "Input Widget",
hint: "Enter text",
child: Container(
width: 200,
child: TextFormField(
decoration: InputDecoration(
labelText: "Label",
),
),
),
),
SizedBox(height: 50),
Semantics(
label: "Custom Container Widget",
hint: "Custom Container",
child: Container(
width: 200,
height: 50,
decoration: BoxDecoration(
color: Colors.grey,
),
),
),
],
),
),
),
);
}
}

Answer 1

我希望这些样本能帮助你：

Semantics(
label: 'Article title',
child: Container(...),
),

Text(
widget.article.author?.name ?? '',
semanticsLabel: 'Author name',
),

记住，首先你必须激活它们。当使用html渲染器时，您可以在浏览器控制台中尝试这些命令

// First activate them:
document.querySelector('flt-glass-pane').shadowRoot.querySelector('flt-semantics-placeholder').click({force: true});
// Then start searching to see if the label you are searching for is available:
document.querySelector('flt-glass-pane').shadowRoot.querySelectorAll('[aria-label]')
document.querySelector('flt-glass-pane').shadowRoot.querySelector('[aria-label="Author avatar"]')