widget.something 在有状态的小部件中

Question

import 'package:duck/MoreAboutProduct.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CategoryComponents extends StatelessWidget {
  final String NAME;
 CategoryComponents(
  this.NAME);

    @override
  Widget build(BuildContext context) {
    return Column(
     children:[
       Text($NAME),
       RaisedButton( 
child : Text(More Info),

onPressed:(){

Navigator.of(context).push(MaterialPageRoute(builder: (context) {
    return MoreAboutProduct(
    NAMEp: NAME,

}
    ),
    ],);

我有一个名为 CategoryComponents 的类，在这个例子中它只有 1 个变量 'NAME'，其他的类名为 Samsung 和 MoreAboutProduct，我将在下面的行中添加其他的代码，我想在 Samsung 中调用 CategoryComponents 类并传递 NAME 的值和其他值（为简单起见，在此示例中未显示其他值），我想在 Samsung 类中显示 NAME 的值，它们将是 CategoryComponents 类中的底部，它将我转移到 MoreAboutProduct 类并显示更多有关产品的信息，但某些数据必须仅用于第一个产品，这就是为什么我需要在三星和 MoreAboutProduct 之间建立连接，我找到了一种方法，但我确实在理解代码时遇到了一些问题，特别是 Navigator 部分以及变量如何在在Samsung 类的构造函数参数中传递的CategoryComponents 可以在MoreAboutProduct 类中访问吗？和 widget.NAME 部分，我知道这是一个很长的问题，但如果你想投反对票，请先给我一个答案。

import 'package:duck/MoreAboutProduct.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'CategoryComponents.dart';

class Samsung extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _x,
      appBar: myAppbar("Samsung"),
      body: FutureBuilder(
        future: getData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (context, index) {
                  return CategoryComponents(
                    snapshot.data[index]['NAME']
)};

这是三星类，它们是我传递的其他参数，但在这个例子中只有一个参数只是为了让你理解我的问题，这也是我使用 ListView.builder 的原因。

import 'package:duck/myAppbar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'myCarousel.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class MoreAboutProduct extends StatefulWidget {
  final String NAMEp;
MoreAboutProduct(
  {this.NAMEp});
}
 @override
  _MoreAboutProductState createState() => _MoreAboutProductState();
}

class _MoreAboutProductState extends State<MoreAboutProduct> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ...,
      body: Column(
        children: [
         ...
          ),
          Expanded(
            child: Container(
              child: ListView.builder(
                itemCount: widget.snapshotLengthp,
                itemBuilder: (context, index) {
                  return Container(
                    child: Column(
                      children: [
                        SpecificationsDetails(context, 'NAME', widget.NAMEp),
....
],
),);},),),),),);

SpecificationsDetails 是负责样式的Function，不需要显示。

这里有一些示例运行：

This image is in Samsung class but Categorycomponents class is responsible for passing data to it and the styling

And this is in MoreAboutProduct class

Answer 1

您可以在应用中创建命名路由。

MaterialApp(
  // Start the app with the "/" named route. In this case, the app starts
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/more_about_products': (context) => MoreAboutProduct(),
    
    '/samsung': (context) => Samsung(),
  },
);

来自 Flutter 文档的代码。

在类别组件类中你可以有这样的东西：

 Navigator.of(context).pushNamed("/more_about_products", arguments = {name: this.NAME});

之后，您可以使用 ModalRoute 在 MoreAboutProducts 中获取此参数，如下所示：

class _MoreAboutProductState extends State<MoreAboutProduct> {
  @override
  Widget build(BuildContext context) {

    final args = ModalRoute.of(context).settings.arguments;
    // to grab the **name** argument use ***args.name*** like in print function below.
    print(args.name)
    return Scaffold(
      appBar: ...,
      body: Column(
        children: [
         ...
          ),
          Expanded(
            child: Container(...etc code....

请阅读打印功能和 ModalRoute 之间的评论。

更多信息查看flutter named routes和passing the arguments to named routes