如何將 MaterialPageRoute 傳遞給 Widget

Question

我正在嘗試制作一個具有手勢檢測器的小部件，當您按下它時會打開一個 MaterialPageRoute。 在構建方法中，我要輸入3個構造函數，一個label，一個圖標，最后是路由。 label 和圖標都可以正常工作。 我不確定要使用哪種變量或鏈接的語法。 我對 Flutter 和一般編程仍然很陌生。

按下時，此代碼中的“ToolMaker”應導航到我指定的 MaterialPageRoute，在本例中為 ScoreKeeper()。 下面的代碼給了我一個錯誤“參數類型'ScoreKeeper'不能分配給參數類型'Navigator'”

'''

class ToolsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Text('Tools'),
        Row(
          children: [
            ToolMaker('Score Board', Icon(Icons.score_outlined), ScoreKeeper()),
          ],
        ),
      ],
    );
  }
}

class ToolMaker extends StatelessWidget {
  @required
  final String label;
  @required
  final Icon icon;
  final Navigator link;

  const ToolMaker(this.label, this.icon, this.link);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          GestureDetector(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => this.link,
                ),
              );
            },
            child: Container(
              height: MediaQuery.of(context).size.width / 4,
              width: MediaQuery.of(context).size.width / 4,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(8)),
                color: Colors.white,
                border: Border.all(color: Colors.grey),
              ),
              child: Center(
                child: this.icon,
              ),
            ),
          ),
          Text(this.label)
        ],
      ),
    );
  }
}

'''

Answer 1

按下時，此代碼中的“ToolMaker”應導航到 MaterialPageRoute

這是一個 function，你有幾個選擇

1)使用 function 參數代替final Navigator link; 使用final Function onTap;

在您的手勢檢測器 onTap 中調用 oncall 函數

GestureDetector(
            onTap:widget.onTap,

然后在創建小部件時解析參數

 ToolMaker('Score Board', Icon(Icons.score_outlined),myFunction),

通過在小部件構造函數周圍添加 {} 來使用名為 arguments 的提示

 const ToolMaker({this.label, this.icon, this.link});

2導航使用

命名路線。

Answer 2

您應該將類型Navigator更改為Widget 。