0

我正在尝试构建多级列表视图，当我们点击子项目时，它应该将参数传递给名为 QuizOptionsDialog 的其他页面。

1) 我可以使用 print(root.name) 打印 root.name；使用 onTap

2）但是当我们尝试使用以下代码导航时，它显示未定义的名称“上下文”

完整代码和错误 enter code here代码页 1/2 enter code here代码页 2/2 enter code here错误

import 'package:flutter/material.dart';
import 'package:iti/quiz/ui/widgets/quiz_options.dart';

class ExpansionTileDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('List of Question Papers'),
        ),
        body: ListView.builder(
          itemCount: data.length,
          itemBuilder: (BuildContext context, int index) => CategoryItem(
            data[index],
          ),
        ),
      ),
    );
  }
}

// Welcome to another flutter tutorial
// In this video we will see how to create a multi-level Expansion List
// First Let's create a class for each row in the Expansion List

class Category {
  final String id;
  final String name;
  final List<Category>
  children; // Since this is an expansion list ...children can be another list of entries
  Category(this.id, this.name, [this.children = const <Category>[]]);
}

// This is the entire multi-level list displayed by this app
final List<Category> data = <Category>[
  Category(
    '1',
    'Main Category',
    <Category>[
      Category(
        '1.1',
        'Sub Category',
        <Category>[
          Category('1.1.1', 'Sub-Sub Category', <Category>[
            Category('1.1.1.1', 'Sub-Sub-Sub Category',),
            Category('1.1.1.2', 'Sub-Sub-Sub Category',),
          ]),
          Category('1.1.2','Sub-Sub Category',
              <Category>[
                Category('1.1.2.1', 'Sub-Sub-Sub Category',),
                Category('1.1.2.2', 'Sub-Sub-Sub Category',),
              ]
          ),
          Category('1.1.3', 'Sub-Sub Category',
              <Category>[
                Category('1.1.3.1', 'Sub-Sub-Sub Category',),
                Category('1.1.3.2', 'Sub-Sub-Sub Category',),
              ]
          ),
        ],
      ),
    ],
  ),
];

// Create the Widget for the row
class CategoryItem extends StatelessWidget {
  const CategoryItem(this.category);
  final Category category;

  // This function recursively creates the multi-level list rows.
  Widget _buildTiles(Category root) {
    if (root.children.isEmpty) {
      return ListTile(
        title: Text(root.name),
             onTap: () {
          print(root.name);
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => QuizOptionsDialog(category: category,),
            ),
          );
        },
      );

    }
    return ExpansionTile(
      key: PageStorageKey<Category>(root),
      title: Text(root.name),
      children: root.children.map<Widget>(_buildTiles).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return _buildTiles(category);
  }

  _categoryPressed(BuildContext context,Category category) {
    showModalBottomSheet(
      context: context,
      builder: (sheetContext) => BottomSheet(
        builder: (_) => QuizOptionsDialog(category: category,),
        onClosing: (){},

      ),

    );

  }
}
4

1 回答 1

1

更改您的 CategoryItem 类，使其BuildContext context在构造函​​数中也接受一个变量，并将其分配给 BuildContext 变量，就像您对 category 所做的那样，然后在创建 new 时从主小部件传递该上下文CategoryItem。这将使您能够访问上下文，并且应该允许您进行导航。

为此：

将上下文存储在 CategoryItem 类中，以便每个实例都可以访问它。

class CategoryItem extends StatelessWidget {
  const CategoryItem(this.category, this.context);
  final Category category;
  final BuildContext context;

更新 ListView.builder() 以适当地实例化更新后的 CategoryItem 类并传递上下文。

body: ListView.builder(
  itemCount: data.length,
  itemBuilder: (BuildContext context, int index) => CategoryItem(
    data[index], context
  ),
),

现在您应该可以访问您需要的页面的 BuildContext 了。

于 2020-04-07T08:37:06.577 回答