Question

我正在尝试使用以下代码构建有关照片描述的页面：

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.”， “ Image1”） 我想从上一页中单击的图像中获取变量：

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)),
          ),
        )
      ],
    );
  }
}

或简单地：

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

关于，苗条

Answer 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对象列表中。其他屏幕的相关信息通过导航器传递。使用此解决方案，您只需要在此列表中维护图像数据。如果将更多项目添加到列表，则网格视图会自动展开。

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'),
                               ];

让我知道是否有任何不清楚的地方：）

如何从前一页抖动中获取数据

1 个答案: