时间戳

首页 > 解决方案 > 如何将选中的 List Tile 中的数据传递到 Flutter 中的下一页（篮子）

flutter - 如何将选中的 List Tile 中的数据传递到 Flutter 中的下一页（篮子）

问题描述

我以前使用 Listview 来展示我的数据，但现在我被建议使用 Checkbox List 磁贴，但我不知道如何传递数据。我想将选定/选中的列表图块的数据传递到下一页（篮子）。我该怎么做，请帮助我。

我是 Flutter 的新手。

主要方法类

import 'package:cart_app1/Basket.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        Basket.routeName: (context) => Basket(),
      },
    );
  }
}

产品列表类

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Map<String, bool> values = {
    "GIN COCKTAILS \nClover Club \t  R65": false,
    "Beers & Ciders \nHeineken NRB \t R29": false,
    "Vodka \nCiroc \t R35": false,
    "Vodka \nCruz Vodka \t R30": false,
    "COGNAC \nHennesy \t R40": false,
    "Tequilla \nEl Jimador \t R30": false,
    "Non-Alcoholic \nSoft-Drink \t R20": false,
    "WHISK[E]Y \nJohnie Walker Red \t R25": false,
  };

  var toggle = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("The Wing Republic"),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.shopping_basket),
            onPressed: () {
              Navigator.of(context)
                  .pushNamed(Basket.routeName, arguments: values);
            },
          ),
        ],
      ),
      body: ListView(
        children: values.keys.map((String key) {
          return CheckboxListTile(
            title: Text(key),
            subtitle: Text(""),
            isThreeLine: false,
            value: values[key],
            onChanged: (bool value) {
              setState(() {
                values[key] = value;
              });
            },
          );
        }).toList(),
      ),
    );
  }
}

篮法

import 'package:flutter/material.dart';

class Basket extends StatelessWidget {
  static const routeName = '/Basket';

  @override
  Widget build(BuildContext context) {
    final data = ModalRoute.of(context).settings.arguments as Map<String, bool>;
    return Scaffold();
  }
}

标签： flutterdart

解决方案

你可以传入方法arguments。pushNamed

Navigator.of(context).pushNamed(Basket.routeName, arguments: values);

在接收端，用于ModalRoute获取值。

import 'package:flutter/material.dart';

class Basket extends StatelessWidget {
  static const routeName = '/Basket';

  @override
  Widget build(BuildContext context) {
    final data = ModalRoute.of(context).settings.arguments as Map<String, bool>;
    return Scaffold();
  }
}

MyApp 中的路由不正确。如果你想使用routes，你不能使用home属性。而不是home指定initialRoute.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        Basket.routeName: (context) => Basket(),
      },
    );
  }
}

推荐阅读