从数据文件中获取 url 以重定向到 gridview 构建器中的新指向页面

Question

Flutter 和编码的新手，所以新手警告：D，我正在尝试创建一个 gridview.builder，它将在点击时重定向到正确分配给该索引页面（已创建），但我没有不知道如何在 model.dart 中分配它，然后将它传递给 InkWell 中的 Navigator，非常感谢任何解释这是如何工作的

这是 gridview 页面

    import 'package:flutter/material.dart';
import 'package:practice/data/model.dart';
import 'package:practice/builds/allbuilds.dart';

class GridViewPage extends StatefulWidget {
  @override
  _GridViewPage createState() => _GridViewPage();
}

class _GridViewPage extends State<GridViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.grey,
          automaticallyImplyLeading: true,
          title: const Text(
            'Builds',
            style: TextStyle(
              fontFamily: 'Lexend Doca',
              color: Colors.white,
              fontSize: 32,
              fontWeight: FontWeight.bold,
            ),
          ),
          actions: const [],
          centerTitle: false,
          elevation: 2,
        ),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsetsDirectional.fromSTEB(15, 0, 15, 25),
                child: GridView.builder(
                  itemCount: griddata.length,
                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    crossAxisSpacing: 10,
                    mainAxisSpacing: 10,
                    childAspectRatio: 1,
                  ),
                  itemBuilder: (context, index) {
                    return GridSingleItem(itemGriddata: griddata[index]);
                  },
                ),
              ),
            ),
          ],
        ));
  }
}

class GridSingleItem extends StatelessWidget {
  final dynamic itemGriddata;

  const GridSingleItem({Key key, @required this.itemGriddata})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => PageX()));
      },
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25),
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            color: const Color(0x00EEEEEE),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: Image.asset(itemGriddata["image"]).image,
            ),
          ),
        ),
      ),
    );
  }
}

这是模特

    const griddata = [
  {
    "name": "Page1",
    "image" : "assets/images/Image1.png",
  },

  {
  "name": "Page2",
  "image" : "assets/images/Image2.png",
  }

];

Answer 1

如果我没答错你的问题。您想为特定数据创建模型，然后在gridviewbuilder中使用数据，然后在点击时将数据传递给下一个 screen/page。 [ { “名称”：“第1页”， “图片”：“assets/images/Image1.png”， },

{
  "name": "Page2",
  "image" : "assets/images/Image2.png",
}
]

从数据中我们可以得到

class Data{
final String name;
final String image;

Data({this.name,this.image});
}

现在 const griddata 变成了；

const griddata = [

Data(name:'Page1',image:"assets/images/Image1.png",),
Data(name: "Page2","image : "assets/images/Image2.png")
];

到目前为止我们所做的是从原始网格数据创建模型，

Now passing the data to other pages;

我建议制作目标页面，即 PageX 以接受数据模型像这样；

class PageX extends StatelessWidget{
final Data data; //<------
 PageX(data);

@override 
Widget build(){
....
  }
}

然后在你的 onTap 属性中，你可以有类似的东西；

 Navigator.push(
            context, MaterialPageRoute(builder: (context) => PageX(data)));

更新：

class GridSingleItem extends StatelessWidget {
  final dynamic itemGriddata;
  final Function onTap; //add a function as a parameter/property here

  const GridSingleItem({Key key,
    @required this.itemGriddata,
    this.onTap,
    this.image,
    })
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap:onTap,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(25),
        child: Container(
          width: 100,
          height: 100,
          decoration: BoxDecoration(
            color: const Color(0x00EEEEEE),
            image: DecorationImage(
              fit: BoxFit.cover,
              image: Image.asset(itemGriddata["image"]).image,
            ),
          ),
        ),
      ),
    );
  }
}

完整代码：

        import 'package:flutter/material.dart';
        import 'package:practice/data/model.dart';
        import 'package:practice/builds/allbuilds.dart';
        
        class GridViewPage extends StatefulWidget {
          @override
          _GridViewPage createState() => _GridViewPage();
        }
        
        class _GridViewPage extends State<GridViewPage> {
          @override
          Widget build(BuildContext context) {
            return Scaffold(
                appBar: AppBar(
                  backgroundColor: Colors.grey,
                  automaticallyImplyLeading: true,
                  title: const Text(
                    'Builds',
                    style: TextStyle(
                      fontFamily: 'Lexend Doca',
                      color: Colors.white,
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  actions: const [],
                  centerTitle: false,
                  elevation: 2,
                ),
                body: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsetsDirectional.fromSTEB(15, 0, 15, 25),
                        child: GridView.builder(
                          itemCount: griddata.length,
                          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 4,
                            crossAxisSpacing: 10,
                            mainAxisSpacing: 10,
                            childAspectRatio: 1,
                          ),
                          itemBuilder: (context, index) {
                            return GridSingleItem(itemGriddata:   
               griddata[index],
                   onTap:(){
    
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => 
  PageX(griddata[index])));
    }
    );
                          },
                        ),
                      ),
                    ),
                  ],
                ));
          }
        }

Answer 2

好吧，我自己想出来了，原来是字面上的 2 行代码

在模型中，将 const 交换为 final，添加 url 属性

       final griddata = [
  {
    "name": "Page1",
    "image" : "assets/images/Image1.png",
    "url": Page1()
  },

  {
  "name": "Page2",
  "image" : "assets/images/Image2.png",
  "url": Page2()

  }
];

并在 GridSingleItem onTap 中传递 itemGriddata["url"]

    class GridSingleItem extends StatelessWidget {
  final dynamic itemGriddata;

  const GridSingleItem({Key key, @required this.itemGriddata})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () async {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => itemGriddata["url"]));
      },

从数据文件中获取 url 以重定向到 gridview 构建器中的新指向页面

fetch url from data file to redirect to new pointed page in gridviewbuilder

flutter

flutter-layout