如何在小部件层次结构中定位多个相同类型的小部件?
How to locate multiple widget of same type in widget hierarchy?
我正在为我的一个 flutter-web 应用程序开发一些集成测试。考虑到从上到下的方法,我想在下面的小部件层次结构树中专门定位容器(宽度:50,高度:50)。
ParentWidget --> Row --> Text, SizedBox, Row --> Container(), Container(width: 50, height: 50), Container().
注:无键入场
我尝试使用 ParentWidget 的后代 --> Row --> Row --> 和索引尝试定位到 select 第二个容器,但这不起作用,失败并显示错误 "错误状态:无元素".
import 'package:flutter/material.dart';
class ParentWidget extends StatelessWidget {
const ParentWidget({Key? key});
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Hello World..!!"),
SizedBox(
width: 20,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
width: 20,
height: 20,
color: Colors.red,
),
Container(
width: 50,
height: 50,
color: Colors.red,
),
Container(
width: 20,
height: 20,
color: Colors.red,
),
],
),
],
);
}
}
final container = tester.widget<Container>(find.descendant(
of: find.descendant(
of: find.byType(ParentWidget), matching: find.byType(Row)),
matching: find.descendant(
of: find.byType(Row), matching: find.byType(Container).at(1))));
要在测试中查找多个小部件,您可以这样做:
testWidgets('Test containers', (tester) async {
await tester.pumpWidget(ParentWidget());
expect(find.byType(Container), findsNWidgets(3));
});
更多信息请查看https://docs.flutter.dev/cookbook/testing/widget/introduction
编辑:
要测试第二个 Container 的宽度,您可以这样做:
//get the second element's widget, index 1, cast it as a container and check it's width
expect((find.byType(Container).evaluate().elementAt(1).widget as Container).constraints?.maxWidth, 50.0);
如果您的小部件树嵌套很深,并且您想在树中找到特定的小部件,我们可以使用一些东西:
如果 sub-widget 树包含多个相同类型的小部件...尝试通过索引定位它...查找将如何工作,它会尝试在 ParentWidget
下找到第二个容器子树。
final container = (find
.descendant(
of: find.byType(ParentWidget),
matching: find.byType(Container),
matchRoot: true)
.evaluate()
.elementAt(1)
.widget as Container);
我正在为我的一个 flutter-web 应用程序开发一些集成测试。考虑到从上到下的方法,我想在下面的小部件层次结构树中专门定位容器(宽度:50,高度:50)。 ParentWidget --> Row --> Text, SizedBox, Row --> Container(), Container(width: 50, height: 50), Container(). 注:无键入场
我尝试使用 ParentWidget 的后代 --> Row --> Row --> 和索引尝试定位到 select 第二个容器,但这不起作用,失败并显示错误 "错误状态:无元素".
import 'package:flutter/material.dart';
class ParentWidget extends StatelessWidget {
const ParentWidget({Key? key});
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Hello World..!!"),
SizedBox(
width: 20,
),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Container(
width: 20,
height: 20,
color: Colors.red,
),
Container(
width: 50,
height: 50,
color: Colors.red,
),
Container(
width: 20,
height: 20,
color: Colors.red,
),
],
),
],
);
}
}
final container = tester.widget<Container>(find.descendant(
of: find.descendant(
of: find.byType(ParentWidget), matching: find.byType(Row)),
matching: find.descendant(
of: find.byType(Row), matching: find.byType(Container).at(1))));
要在测试中查找多个小部件,您可以这样做:
testWidgets('Test containers', (tester) async {
await tester.pumpWidget(ParentWidget());
expect(find.byType(Container), findsNWidgets(3));
});
更多信息请查看https://docs.flutter.dev/cookbook/testing/widget/introduction
编辑: 要测试第二个 Container 的宽度,您可以这样做:
//get the second element's widget, index 1, cast it as a container and check it's width
expect((find.byType(Container).evaluate().elementAt(1).widget as Container).constraints?.maxWidth, 50.0);
如果您的小部件树嵌套很深,并且您想在树中找到特定的小部件,我们可以使用一些东西:
如果 sub-widget 树包含多个相同类型的小部件...尝试通过索引定位它...查找将如何工作,它会尝试在 ParentWidget
下找到第二个容器子树。
final container = (find
.descendant(
of: find.byType(ParentWidget),
matching: find.byType(Container),
matchRoot: true)
.evaluate()
.elementAt(1)
.widget as Container);