有没有办法将一排按钮导出为小部件？

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 设为全局，如果将在其他地方使用