如何将数据从列表视图传递到下一个屏幕,如抖动图像

时间:2019-07-08 11:04:02

标签: flutter dart

我需要将字符串和图像从列表视图传递到下一个屏幕,并且字符串和图像在列表视图中 我应该如何让它们颤抖。

我在category.dart中有项目 import'package:flutter / material.dart'; ##标题##

List categories = [
  {
    "name": "Indian",
    "color1": Color.fromARGB(100, 0, 0, 0),
    "color2": Color.fromARGB(100, 0, 0, 0),
    "img": "assets/indian.jpg"},
  {
    "name": "Italian",
    "color1": Color.fromARGB(100, 0, 0, 0),
    "color2": Color.fromARGB(100, 0, 0, 0),
    "img": "assets/food1.jpeg"
  },
  {
    "name": "Chinese",
    "color1": Color.fromARGB(100, 0, 0, 0),
    "color2": Color.fromARGB(100, 0, 0, 0),
    "img": "assets/food2.jpeg"
  },
  {
    "name": "Nigerian",
    "color1": Color.fromARGB(100, 0, 0, 0),
    "color2": Color.fromARGB(100, 0, 0, 0),
    "img": "assets/food3.jpeg"
  },
  {
    "name": "Spanish",
    "color1": Color.fromARGB(100, 0, 0, 0),
    "color2": Color.fromARGB(100, 0, 0, 0),
    "img": "assets/food4.jpeg"
  },
  {
    "name": "Mexican",
    "color1": Color.fromARGB(100, 0, 0, 0),
    "color2": Color.fromARGB(100, 0, 0, 0),
    "img": "assets/food5.jpeg"
  },

];
  1. 第一个屏幕上的列表视图位于home.dart
     Container(
              height: MediaQuery.of(context).size.height/6,
              child: ListView.builder(
                primary: false,
                scrollDirection: Axis.horizontal,
                shrinkWrap: true,
                itemCount: categories == null ? 0:categories.length,
                itemBuilder: (BuildContext context, int index) {
                  Map cat = categories[index];


                  return

                  new InkWell(

                      onTap:() {
                          Navigator.of(context)
                            .push(MaterialPageRoute<Null>(builder: (BuildContext context) {
                            print(cat);
                          return new Manu_screen();

                            }));
                      },

                      child: Padding(
                        padding: EdgeInsets.only(right: 10.0),
                        child: ClipRRect(

                          borderRadius: BorderRadius.circular(8.0),
                          child: Stack(

                            children: <Widget>[

                              Image.asset(
                                cat["img"],
                                height: MediaQuery.of(context).size.height/6,
                                width: MediaQuery.of(context).size.height/6,
                                fit: BoxFit.cover,

                              ),

                              Container(


                                decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.topCenter,
                                    end: Alignment.bottomCenter,
                                    // Add one stop for each color. Stops should increase from 0 to 1
                                    stops: [0.2, 0.7],
                                    colors: [
                                      cat['color1'],
                                      cat['color2'],
                                    ],
                                    // stops: [0.0, 0.1],
                                  ),
                                ),

                                height: MediaQuery.of(context).size.height/6,
                                width: MediaQuery.of(context).size.height/6,

                              ),


                              Center(

                                child: Container(
                                  height: MediaQuery.of(context).size.height/6,
                                  width: MediaQuery.of(context).size.height/6,
                                  padding: EdgeInsets.all(1),

                                  constraints: BoxConstraints(
                                    minWidth: 20,
                                    minHeight: 20,



                                  ),
                                  child: Center(
                                    child: Text(
                                      cat["name"],
                                      style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 20,
                                        fontWeight: FontWeight.bold,

                                      ),
                                      textAlign: TextAlign.center,
                                    ),
                                  ),
                                ),
                              ),

                            ],
                          ),
                        ),
                      )
                  );
                },
              ),

            ),
  1. 我需要按类别将数据获取到我的第二屏幕上

2 个答案:

答案 0 :(得分:1)

您可以将参数传递给第二个屏幕:

Navigator.of(context).push(
    MaterialPageRoute(
        builder: (BuildContext context) {
            print(cat);
            return new Manu_screen(cat);
        }
    )
);
// Snippet from @Can Taşpınar
class Manu_screen extends StatelessWidget {
  final Map cat;

  Manu_screen({Key key, this.cat}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(cat["name"]),
    );
  }
}

答案 1 :(得分:1)

如@Martyns所说,Manu_screen可能像这样:

class Manu_screen extends StatelessWidget {
  final Map cat;

  Manu_screen({Key key, this.cat}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(cat["name"]),
    );
  }
}