Flutter：我想将（标题、详细信息、内容）传递到详细信息页面，在详细信息页面的顶部垂直显示它？

Question

例如：关于问题的详细信息................................................ .....................当我点击一个 gridview 项目时，我想将（标题、详细信息、内容）传递给详细信息页面，在详细信息页面的顶部垂直显示，但是当我通过时数据无法在详细信息页面中获取数据我在详细信息页面中创建了一个构造函数，无法在文本和图像中设置数据。

Home Page 
----------

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'DetailsPage.dart';
var paddingBottom = 48.0;

class HomePage extends StatelessWidget {
  final String apiUrl = "https://www.sofikart.com/MobileApi/banners";
  final String apiUrl1 =
      "https://wayindia.net/indigo/odia_rashifal/rasifhala.php";

  Future<List<dynamic>> fetchUsers() async {
    var result = await http.get(Uri.parse(apiUrl1));
    return json.decode(result.body)['data'];
  }

  String id(dynamic user) {
    return user['id'];
  }

  String title(dynamic user) {
    return user['title'];
  }

  String content(dynamic user) {
    return user['content'];
  }

  String eng_title(dynamic user) {
    return user['eng_title'];
  }

  String main_img(dynamic user) {
    return user['main_img'];
  }

  String image_2(dynamic user) {
    return user['image_2'];
  }

  String image_3(dynamic user) {
    return user['image_3'];
  }

  String image_4(dynamic user) {
    return user['image_4'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ଆଜିର ରାଶିଫଳ'),
        centerTitle: true,
      ),
      body: Container(
        child: FutureBuilder<List<dynamic>>(
          future: fetchUsers(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              print(id(snapshot.data[0]));

              return GridView.builder(
                itemCount: snapshot.data.length,
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  crossAxisSpacing: 20,
                  mainAxisSpacing: 25,
                ),
                padding: EdgeInsets.all(13),
                shrinkWrap: true,
                itemBuilder: (ctx, index) {
                  return InkWell(
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.transparent,
                          borderRadius: BorderRadius.all(Radius.circular(12))),
                      child: Column(
                        children: [
                          Expanded(
                            flex: 9,
                            child: ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(12)),
                                child: Image.network(
                                    snapshot.data[index]['main_img'],
                                    fit: BoxFit.fill)),
                          ),
                          Expanded(
                              flex: 2,
                              child: Text(
                                title(snapshot.data[index]),
                                style: TextStyle(
                                    color: Colors.black, fontSize: 17),
                              )),
                        ],
                      ),
                    ),
                    onTap: () {
                      print("Click event on Container");
                      Navigator.of(context).pushAndRemoveUntil(
                          MaterialPageRoute(builder: (context) => DetailsPage()), (route) => false);
                    },
                  );
                },
              );
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}
   
Details Page 
------------

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:odia_rasiphala/HomePage.dart';
import 'dart:convert';

class DetailsPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {


    return WillPopScope(
        onWillPop: () async => false,
        child: new Scaffold(
          appBar: new AppBar(
            title: new Text('ଆଜିର ରାଶିଫଳ'),
            leading: new IconButton(
              icon: new Icon(Icons.arrow_back_outlined),
              onPressed: () => Navigator.pushReplacement(context,
                  new MaterialPageRoute(builder: (context) => HomePage())),
            ),
            actions: [
              IconButton(
                onPressed: () {},
                icon: Icon(Icons.share),
              ),
            ],
          ),
          body: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Image.network(
                '',
                width: 200.0,
                height: 200.0,
              ),
              new Center(
                child: new Text('',style: TextStyle(
                    color: Colors.black,fontSize: 17
                )),
              )
            ],
          ),
        ));
  }
}

Answer 1

我猜你想将 "eng_title" 和 "main_img" 传递到详细信息屏幕.

要做到这一点，首先在您的详细信息页面中创建一个构造函数。示例：

class DetailScreen extends StatelessWidget {
  // In the constructor, require a Todo.
  const DetailScreen({Key? key, required this.eng_title, required this.main_img}) : super(key: key);

  // Declare a field that holds the strings passed to this class.
  final String eng_title;
  final String main_img;

  @override
  Widget build(BuildContext context) {
    // Use the final parameters to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(eng.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(main_img),
      ),
    );
  }
}

在您的 OnTap 函数中，当您单击列表中的项目时，只需像这样传递所需的参数

onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(eng_title: snapshot.data[index]['eng_title'], main_img: snapshot.data[index]['main_img']),
          ),
        );
      },

这样您就可以将数据从一个屏幕传递到另一个屏幕。如果您希望用户返回主页中的列表，请不要使用 push 和 remove until。

有关传递数据的更多信息，请阅读 flutter 的以下文章： https://docs.flutter.dev/cookbook/navigation/passing-data

Flutter：我想将（标题、详细信息、内容）传递到详细信息页面，在详细信息页面的顶部垂直显示它？

Flutter : i want to pass (title,details,content) to details page display it in vertically in top of the details page?

flutter

api

gridview