Flutter Build Tiles onTap显示错误“未定义名称'context'”

时间:2020-04-07 08:10:54

标签: flutter dart

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

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

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

完整代码和错误 enter code here Code page 1/2 enter code here Code page 2/2 enter code here Error

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: (){},

      ),

    );

  }
}

1 个答案:

答案 0 :(得分:0)

更改您的CategoryItem类,使其在构造函​​数中也接受一个BuildContext context变量,然后像对待category一样将其分配给BuildContext变量,然后在创建新的{{1}时从主窗口小部件传递该上下文。 }。这将使您可以访问上下文,并且应该可以进行导航。

要这样做:

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

CategoryItem

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

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

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