Question

我是扑扑的新手，我一直在尝试创建一个底部面板，当您单击浮动操作按钮时，该底部面板会打开。我遵循了很多关于该怎么做的教程，它们都显示了相同的内容，但是每当我尝试实现它时，我都无法正常工作，而是在调试控制台中抛出“找不到MediaQuery窗口小部件”错误。

我的颤动代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('hello world')),
        floatingActionButton: FloatingActionButton(
          onPressed: () => showMe(context),
          child: Icon(Icons.add),
        ),
      ),
    );
  }

  void showMe(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext contex) {
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Send a message'),
                onTap: () {
                  Navigator.pop(context);
                  print('done !');
                },
              ),
            ],
          );
        });
  }
}

调试控制台的输出

════════ Exception caught by gesture ═══════════════════════════════════════════
The following assertion was thrown while handling a gesture:
No MediaQuery widget found.

MyApp widgets require a MediaQuery widget ancestor.
The specific widget that could not find a MediaQuery ancestor was: MyApp
The ownership chain for the affected widget is: "MyApp ← [root]"

Typically, the MediaQuery widget is introduced by the MaterialApp or WidgetsApp widget at the top of your application widget tree.

When the exception was thrown, this was the stack
#0      debugCheckHasMediaQuery.<anonymous closure> 
package:flutter/…/widgets/debug.dart:211
#1      debugCheckHasMediaQuery 
package:flutter/…/widgets/debug.dart:223
#2      showModalBottomSheet 
package:flutter/…/material/bottom_sheet.dart:469
#3      MyApp.showMe 
package:unitconverter/main.dart:21
#4      MyApp.build.<anonymous closure> 
package:unitconverter/main.dart:13
...
Handler: "onTap"
Recognizer: TapGestureRecognizer#e6e79
    debugOwner: GestureDetector
    state: possible
    won arena
    finalPosition: Offset(367.6, 640.7)
    finalLocalPosition: Offset(28.2, 29.3)
    button: 1
    sent tap down
════════════════════════════════════════════════════════════════════════════════

Answer 1

而不是通过脚手架作为家庭，而是创建一个 StatefulWidget 或 StatelessWidget 作为您的家庭，并设置您的家庭创建的小部件的属性

这应该对您有帮助

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showMe(context);
        },
      ),
    );
  }

  void showMe(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext contex) {
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.message),
                title: Text('Send a message'),
                onTap: () {
                  Navigator.pop(context);
                  print('done !');
                },
              ),
            ],
          );
        });
  }
}

Answer 2

试试这个

_showBottomSheet(BuildContext context) {
showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return new Container(
        child: new Padding(
          padding: const EdgeInsets.all(32.0),
          child: new Text(
            'This is the modal bottom sheet',
            textAlign: TextAlign.center,
            style: new TextStyle(
                color: Theme.of(context).accentColor,
                fontSize: 24.0),
          ),
        ),
      );
    });
}

showModalBottomSheet未打开底部工作表，未找到MediaQuery小部件异常

2 个答案: