英文:
showModalBottomSheet() not opening a bottom modal in flutter
问题
The showModalBottomSheet方法没有弹出模态框。我是Flutter和Dart的新手，但我认为这是一个问题，我不需要任何帮助。简单的页面弹出底部模态框似乎没有起作用。
英文:
The showModalBottomSheet does not pop up a modal. I am new to flutter and dart but I think this is a problem, I would not any help. The simple page to pop a bottom sheet modal below.. did not work.
```
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
)
)
)
);
});
}
)
)
)
);
}
}
```
I cannot seem to figure out what the probl
答案1
得分: 3
你可以将你的身体转化为一个新的小部件。
完整代码：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('模态底部表单')),
body: Sheet(), // 新的小部件
),
);
}
}
class Sheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: const Text('显示底部表单'),
onPressed: () {
// 在这里显示表单
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Text(
'这是模态底部表单。单击任意位置以关闭。',
textAlign: TextAlign.center,
style: TextStyle(
color: Theme.of(context).accentColor,
fontSize: 24.0,
),
),
),
);
},
);
},
),
);
}
}
英文:
You can convert your body to a new widget.
Full code:
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),
),
),
);
});
}),
);
}
}
答案2
得分: 0
<h3>大部分情况下它不起作用是因为它存在上下文问题</h3>
确保提供上下文
_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(
'这是模态底部表。单击任何位置以关闭。',
textAlign: TextAlign.center,
style: new TextStyle(
color: Theme.of(context).accentColor,
fontSize: 24.0,
),
),
),
);
},
);
}
英文:
<h3>Mostly it does not work because it has a problem of context</h3>
make sour you give 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),
),
),
);
});
}
答案3
得分: -1
为解决这种问题，您需要延迟触发模态底部表单。
onTap: () {
Future.delayed(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(
'这是模态底部表单。单击任何位置以关闭。',
textAlign: TextAlign.center,
style: new TextStyle(
color: Theme.of(context).accentColor,
fontSize: 24.0),
),
),
);
});
});
}
英文:
To solve this kind of problem, you have to delay triggering the modal bottomsheet.
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),
),
),
);
});
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论