为什么 showModalBottomSheet() 函数不起作用[关闭]答案

【问题标题】：Why is the showModalBottomSheet() function not working [closed]为什么 showModalBottomSheet() 函数不起作用[关闭]
【发布时间】：2020-09-05 10:19:14
【问题描述】：

为什么此代码不起作用并且底部工作表未显示。我也重试了运行代码，但它仍然不起作用。我想在单击按钮时显示模态底页。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void startInputAction(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (_) {
        return Container(
          height: 200,
          padding: EdgeInsets.all(10),
          child: Text("Something"),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Error Practice Bottom Sheet"),
          backgroundColor: Colors.purple,
        ),
        body: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                color: Colors.purple,
                padding: EdgeInsets.all(20),
                child: Text("Click here"),
                onPressed: () => startInputAction(context),
              )
            ],
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： android ios flutter mobile

【解决方案1】：

MateriaApp 处于同一级别，这就是您收到此错误的原因。

以下代码将解决您的问题。

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  void startInputAction(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (_) {
          return Container(
            height: 200,
            padding: EdgeInsets.all(10),
            child: Text("Something"),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Error Practice Bottom Sheet"),
        backgroundColor: Colors.purple,
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
                color: Colors.purple,
                padding: EdgeInsets.all(20),
                child: Text("Click here"),
                onPressed: () => startInputAction(context))
          ],
        ),
      ),
    );
  }
}

【讨论】：

我试过了，它对我来说绝对没问题。非常感谢！

【解决方案2】：

正如@Viren 建议的那样，您的代码中需要有一个MaterialApp。

检查下面的代码：


 import 'package:flutter/material.dart';

void main() => runApp(
    // add your material app here
    MaterialApp(
      home: MyApp(), 
   ),
);

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  void startInputAction(BuildContext context){
    showModalBottomSheet(
      context: context,
      builder: (_){
        return Container(
          height: 200,
          padding: EdgeInsets.all(10),
          child: Text("Something"),
        );
      }
    )
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Error Practice Bottom Sheet"),
          backgroundColor: Colors.purple,
        ),
        body: SingleChildScrollView(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              color: Colors.purple,
              padding: EdgeInsets.all(20),
              child: Text("Click here"),
              onPressed: () => startInputAction(context)
            )
          ],
        ),
        ),
      ),
    );
  }
}

【讨论】：

您好。无需在答案中添加“希望这会有所帮助” - 此处首选技术写作，并且建议简洁。假设没有人发布答案，希望它没有帮助！ ;-)
嗨 Halfer，感谢您的更正。 :)

【解决方案3】：

在 Flutter 文档中查看此示例。

https://api.flutter.dev/flutter/material/showModalBottomSheet.html

您的问题可能与您从Scaffold 传递相同的BuildContext 有关。您至少应该在Scaffold 的body 参数中添加一个Builder 小部件，以获取此小部件所需的适当上下文。

代码如下：

class _MyAppState extends State<MyApp> {
  void startInputAction(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (_) {
        return Container(
          height: 200,
          padding: EdgeInsets.all(10),
          child: Text("Something"),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Error Practice Bottom Sheet"),
          backgroundColor: Colors.purple,
        ),
        body: Builder(
          builder: (context) {
            return SingleChildScrollView(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    color: Colors.purple,
                    padding: EdgeInsets.all(20),
                    child: Text("Click here"),
                    onPressed: () => startInputAction(context),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

【讨论】：

不管是StatefulWidget还是StatelessWidget，在build方法中声明了Scaffold，将无法显示模态底页。