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

Posted 2023-02-23

【中文标题】widget.something 在有状态的小部件中

【英文标题】：widget.something in stateful widget

【发布时间】：2021-01-26 01:19:53

【问题描述】：

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

【参考方案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