showModalBottomSheet()未在Flutter中打开底部模态

yzckvree  于 2023-05-23  发布在  Flutter
关注(0)|答案(3)|浏览(173)

showModalBottomSheet不弹出模态。我是新来的扑和 dart ,但我认为这是一个问题,我不会有任何帮助。下面弹出一个底部表单模态的简单页面。不起作用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {

    return new MaterialApp(
       home: new Scaffold(
         appBar: new AppBar(title: const Text('Modal bottom sheet')),
         body: new Center(
           child: new RaisedButton(
            child: const Text('SHOW BOTTOM SHEET'),
           onPressed: () {
             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. Click anywhere to dismiss.',
              textAlign: TextAlign.center,
              style: new TextStyle(
                color: Theme.of(context).accentColor,
                fontSize: 24.0
              )
            )
          )
        );
      });
    }
  )
)

)
);


} } ``
我似乎搞不清楚问题出在哪里.
agyaoht7

agyaoht71#

您可以将您的身体转换为新的小部件。
Dart Pad Example
完整代码:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
            appBar: new AppBar(title: const Text('Modal bottom sheet')),
            body: Sheet(), // new Widget
   ));
  }
}

class Sheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new RaisedButton(
          child: const Text('SHOW BOTTOM SHEET'),
          onPressed: () {
            // Show sheet here
            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. Click anywhere to dismiss.',
                        textAlign: TextAlign.center,
                        style: new TextStyle(
                            color: Theme.of(context).accentColor,
                            fontSize: 24.0),
                      ),
                    ),
                  );
                });
          }),
    );
  }
}
unhi4e5o

unhi4e5o2#

大部分是因为上下文有问题,所以不起作用

make sour you给予context

_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. Click anywhere to dismiss.',
            textAlign: TextAlign.center,
            style: new TextStyle(
                color: Theme.of(context).accentColor,
                fontSize: 24.0),
          ),
        ),
      );
    });
}
t30tvxxf

t30tvxxf3#

要解决这类问题,您必须延迟触发模态底表。

onTap :() {
    Future.dalayed(Duration(seconds: 0).then((value) {
      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. Click anywhere to dismiss.',
        textAlign: TextAlign.center,
        style: new TextStyle(
            color: Theme.of(context).accentColor,
            fontSize: 24.0),
                   ),
                  ),
                 );
                });

              }

          }

相关问题