为什么 2 个小部件需要 Show modal Bottom sheet in flutter?
Why is 2 widgets need for Show modal Bottom sheet in flutter?
为什么需要 2 个无状态小部件才能在 flutter 中创建模态底部 sheet?为什么我们不能用一个???
为什么我们必须要有一个带有脚手架的主widget,然后在其中输入另一个widget?当我尝试使用一个无状态小部件 class 时,它不起作用。为什么?
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
},
);
},
),
);
}
}
都是关于build方法的BuildContext属性。
Material应用程序和脚手架将 Material 小部件引入到小部件树中,这些小部件是 showModalBottomSheet 方法正常工作所必需的。因此,如果您在同一个 StatelessWidget 中将 showModalBottomSheet 与 MaterialApp 和 Scaffold 一起声明,上下文是相同的,并且此上下文中没有 MaterialApp 和 Scaffold 组件,它们是将在构建方法完成时在小部件树中引入。
取而代之的是,如果您在单独的小部件中声明您的组件,新小部件的构建方法的 BuildContext 上下文 属性 确实包含有关先前创建的 material 小部件的数据,因此这就是它按预期工作的原因。
为什么需要 2 个无状态小部件才能在 flutter 中创建模态底部 sheet?为什么我们不能用一个??? 为什么我们必须要有一个带有脚手架的主widget,然后在其中输入另一个widget?当我尝试使用一个无状态小部件 class 时,它不起作用。为什么?
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatelessWidget(),
),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
)
],
),
),
);
},
);
},
),
);
}
}
都是关于build方法的BuildContext属性。 Material应用程序和脚手架将 Material 小部件引入到小部件树中,这些小部件是 showModalBottomSheet 方法正常工作所必需的。因此,如果您在同一个 StatelessWidget 中将 showModalBottomSheet 与 MaterialApp 和 Scaffold 一起声明,上下文是相同的,并且此上下文中没有 MaterialApp 和 Scaffold 组件,它们是将在构建方法完成时在小部件树中引入。
取而代之的是,如果您在单独的小部件中声明您的组件,新小部件的构建方法的 BuildContext 上下文 属性 确实包含有关先前创建的 material 小部件的数据,因此这就是它按预期工作的原因。