如何从上一页颤动中获取数据答案

【问题标题】：How to get data from previous page flutter如何从上一页颤动中获取数据
【发布时间】：2020-06-28 08:28:40
【问题描述】：

我正在尝试使用此代码构建一个关于照片描述的页面：

import 'package:flutter/material.dart';
import 'description_widget.dart';

class ImageDescription extends StatefulWidget {
  @override
  _ImageDescriptionState createState() => _ImageDescriptionState();
}

class _ImageDescriptionState extends State<ImageDescription> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white10,
        elevation: 0,
        leading: Container(
          padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
          child: InkWell(
            child: Hero(
              tag: 'back',
              child: Image.asset(
                'assets/images/wp_back_button_icon.png',
                height: 250,
              ),
            ),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ),
        actions: <Widget>[
          Container(
            padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
            child: Hero(
              tag: 'logo',
              child: Image.asset(
                'assets/images/wp_logo.png',
                height: 250,
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: imageDescription(
            "assets/images/gallery/Image1.jpg",
            "Tittle 1",
            "Description 1.",
            "Image1"),
      ),
    );
  }
}

使用我创建的这个小部件：

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

Widget imageDescription(String url, title, description, tag) {
  return Container(
    child: Column(
      children: <Widget>[
        Container(
          child: Column(
            children: <Widget>[
              Center(
                child: Text(title, style: TextStyle(fontSize: 30)),
              ),
              Center(
                child: Text("Let's educate in the fun way!"),
              )
            ],
          ),
        ),
        Container(
          child: Column(
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(10),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(20),
                  child: Hero(tag: tag, child: Image.asset(url)),
                ),
              ),
              Container(
                padding: EdgeInsets.fromLTRB(10, 0, 10, 0),
                child: Card(
                  child: Container(
                    margin: const EdgeInsets.all(10),
                    child: Text(
                      description,
                      textAlign: TextAlign.justify,
                      style: TextStyle(fontSize: 20),
                    ),
                  ),
                ),
              )
            ],
          ),
        )
      ],
    ),
  );
}

但不是手动添加 imageDescription( “资产/图像/画廊/Image1.jpg”， “标题1”， "描述 1.", "图片1"), 我想从我在上一页单击的图像中获取变量：

import 'package:flutter/material.dart';
import 'image_description.dart';
import 'show_image.dart';

class Gallery extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: Colors.white10,
        elevation: 0,
        leading: Container(
          padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
          child: InkWell(
            child: Hero(
              tag: 'back',
              child: Image.asset(
                'assets/images/wp_back_button_icon.png',
                height: 250,
              ),
            ),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ),
        actions: <Widget>[
          Container(
            padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
            child: Hero(
              tag: 'logo',
              child: Image.asset(
                'assets/images/wp_logo.png',
                height: 250,
              ),
            ),
          ),
        ],
      ),
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Container(
              child: Text(
                'AR Gallery',
                style: TextStyle(fontSize: 30),
              ),
            ),
            Container(
              child: Text("Let's educate in the fun way"),
            ),
            Expanded(
              child: SizedBox(
                height: double.infinity,
                child: GridView.count(
                  primary: false,
                  padding: const EdgeInsets.all(20),
                  crossAxisSpacing: 10,
                  mainAxisSpacing: 10,
                  crossAxisCount: 3,
                  children: <Widget>[
                    InkWell(
                      child: Stack(
                        children: <Widget>[
                          ShowImage(
                            url: "assets/images/gallery/Image1.jpg",
                            tag: "Image1",
                            title: "Title 1",
                          )
                        ],
                      ),
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => ImageDescription()));
                      },
                    ),
                    InkWell(
                      child: Stack(
                        children: <Widget>[
                          ShowImage(
                            url: "assets/images/gallery/Image2.jpg",
                            tag: "Image2",
                            title: "Title 2",
                          )
                        ],
                      ),
                      onTap: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => ImageDescription()));
                      },
                    ),
                    InkWell(
                        child: Stack(
                          children: <Widget>[
                            ShowImage(
                              url: "assets/images/gallery/Image3.jpg",
                              tag: "Image3",
                              title: "Title 3",
                            )
                          ],
                        ),
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => ImageDescription()),
                          );
                        }),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

使用这个小部件：

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

class ShowImage extends StatelessWidget {
  final String tag;
  final String url;
  final String title;
  const ShowImage({Key key, this.tag, this.url, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Container(
          height: double.infinity,
          width: double.infinity,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child:
                Hero(tag: tag, child: Image.asset(url, fit: BoxFit.fitHeight)),
          ),
        ),
        Container(
          padding: const EdgeInsets.all(5),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Text(title,
                style: TextStyle(
                    backgroundColor: Colors.deepOrange, color: Colors.white)),
          ),
        )
      ],
    );
  }
}

或者简单地说：

打开图库页面
点击图片
打开图片描述页面，包含点击图片的标题和图片路径

问候，苗条

【问题讨论】：

标签： flutter

【解决方案1】：

我建议你关注this tutorial。

对你来说，这意味着：

创建一个包含您要传递的所有数据的类：

class ImageData {
  final String title;
  final String url;
  final String description;
  final String tag;
  Image(this.title, this.url, this.description, this.tag);
}

将您的 ImageDescriptionScreen 设置为需要一个 Image 对象：

import 'package:flutter/material.dart';
import 'description_widget.dart';
import 'image_data.dart';

class ImageDescription extends StatefulWidget {
final ImageData imageData;

// In the constructor, require an Image Object.
  ImageDescriptionScreen({Key key, @required this.imageData}) : 
  super(key: key);


  @override
  _ImageDescriptionState createState() => _ImageDescriptionState();
  }

class _ImageDescriptionState extends State<ImageDescription> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(
     automaticallyImplyLeading: false,
     backgroundColor: Colors.white10,
     elevation: 0,
     leading: Container(
       padding: EdgeInsets.fromLTRB(20, 20, 0, 0),
       child: InkWell(
         child: Hero(
           tag: 'back',
           child: Image.asset(
             'assets/images/wp_back_button_icon.png',
             height: 250,
           ),
         ),
         onTap: () {
           Navigator.pop(context);
         },
       ),
     ),
     actions: <Widget>[
       Container(
         padding: EdgeInsets.fromLTRB(0, 20, 20, 0),
         child: Hero(
           tag: 'logo',
           child: Image.asset(
             'assets/images/wp_logo.png',
             height: 250,
           ),
         ),
       ),
     ],
   ),
   body: SingleChildScrollView(
     child: imageDescription(
         widget.imageData.url,
         widget.imageData.title,
         widget.imageData.description,
         widget.imageData.tag
        ),
      ),
     );
    }
   }

导航到新页面时传递图像对象：

 Navigator.push(context, MaterialPageRoute(builder: (context) => 
    ImageDescription(imageData: ImageData('title', 'url', 'description', 'tag'),)));

编辑：我将下面概述的解决方案放入dartpad，请随意尝试并复制并粘贴代码。

对我的 dartpad 解决方案的简短说明： 所有图像数据都维护并包含在此 ImageData 对象列表中。其他屏幕的相关信息通过 Navigator 传递。使用此解决方案，您只需在此列表中维护图像数据。如果向列表中添加更多项目，网格视图会自动展开。

final List<ImageData> imageList = [
  ImageData(title: 'MacBook',url: 'https://picsum.photos/250?image=9', 
            description: 'this is a macbook', tag: 'macbook'), 
  ImageData(title: 'Deer',url: 'https://picsum.photos/250?image=1003', 
            description: 'this is a deer', tag: 'deer'),
                               ];

如果有什么不清楚的地方请告诉我:)

【讨论】：

嘿@Niklas，我得到了你的回答帮助了我，但在Navigator.push(context, MaterialPageRoute(builder: (context) => ImageDescription(image: Image('title', 'url', 'description', 'tag'),))); 我必须手动传递数据，我想要的是从我从图库页面单击的图像中收集的数据。有可能吗？
我希望将在导航器中传递的数据是我添加到我使用此调用的小部件的数据：ShowImage( url: "assets/images/gallery/Image2.jpg", tag: "Image2", title: "Title 2", )
请指导我，我是新人
嗨@Slimmy，我通过提供工作solution on dartpad 添加了进一步的说明。希望对你有帮助！
我现在已经清楚地得到了答案:)，感谢您的澄清@nhoelterhoff