有没有一种方法可以将一行按钮导出为小部件

Question

我在两个页面上有这一行，我想作为一个小部件提取以避免重复，但我的IDE不允许我这样做，而是显示一个消息气泡：

无法提取对封闭类方法的引用

下面是我的行，我试图将它封装在容器中，但结果相同。

child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TagButton(
isActive: _selectedTag == 'cart',
tagIcon: Icons.local_grocery_store,
onTap: () {
setState(() {
_selectedTag = 'cart';
});
},
),
TagButton(
isActive: _selectedTag == 'school',
tagIcon: Icons.school,
onTap: () {
setState(() {
selectedTag = 'school';
});
},
),
TagButton(
isActive: _selectedTag == 'all',
tagIcon: Icons.block,
onTap: () {
setState(() {
_selectedTag = 'all';
});
},
),
TagButton(
isActive: _selectedTag == 'relax',
tagIcon: Icons.spa,
onTap: () {
setState(() {
_selectedTag = 'relax';
});
},
),
TagButton(
isActive: _selectedTag == 'recipes',
tagIcon: Icons.restaurant,
onTap: () {
setState(() {
_selectedTag = 'recipes';
});
},
),
],
),

我试着把它作为一种方法提取出来，但一旦我把它移到另一个dart文件中(这样我就可以导入到这两个页面并在那里使用它(，就会出现很多警告

lib/widgets/tagsBar.dart:17:13: Error: Method not found: 'setState'.
setState(() {
^^^^^^^^
lib/widgets/tagsBar.dart:23:21: Error: Getter not found: 'selectedTag'.
isActive: selectedTag == 'school',
^^^^^^^^^^^

Answer 1

实现这一点的更好方法是实现为单独的类widget

import 'package:flutter/material.dart';
class SharedWidgetRow extends StatefulWidget {
final stateRebuild;
SharedWidgetRow({@required this.stateRebuild});
@override
_SharedWidgetRowState createState() => _SharedWidgetRowState();
}
class _SharedWidgetRowState extends State<SharedWidgetRow> {
var  _selectedTag = 'cart';
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
TagButton(
isActive: _selectedTag == 'cart',
tagIcon: Icons.local_grocery_store,
onTap: () {
_selectedTag = 'cart';
widget.stateRebuild();
},
),
TagButton(
isActive: _selectedTag == 'school',
tagIcon: Icons.school,
onTap: () {
selectedTag = 'school';
widget.stateRebuild();
},
),
TagButton(
isActive: _selectedTag == 'all',
tagIcon: Icons.block,
onTap: () {
_selectedTag = 'all';
widget.stateRebuild();
},
),
TagButton(
isActive: _selectedTag == 'relax',
tagIcon: Icons.spa,
onTap: () {
_selectedTag = 'relax';
widget.stateRebuild();
},
),
TagButton(
isActive: _selectedTag == 'recipes',
tagIcon: Icons.restaurant,
onTap: () {
_selectedTag = 'recipes';
widget.stateRebuild();
},
),
],
);
}
}

setState()需要在相同的上下文中，所以在调用这个小部件时应该将其作为参数传递

SharedWidgetRow(stateRebuild: setState((){})),

如果要在其他地方使用，您应该考虑将此变量_selectedTag设为全局变量