英文:
How to position a widget outside ModalBottomSheet in flutter
问题
如何在Flutter中将小部件定位在ModalBottomSheet之外？
我有一个图标，我想将它放在ModalBottomSheet之外，如下图所示。
请提供我实现这样一个小部件的代码。
英文:
How to position a widget outside ModalBottomSheet in flutter?
I have an icon and I want to put it outside the ModalBottomSheet as shown in the picture below
please provide me code to achieve such a widget
答案1
得分: -1
你可以将底部表单创建为两个容器的列，第一个（底部）容器背景设置为透明。这样，你可以通过使用 Stack 将图标（圆形头像等）放在这个透明容器的上面，从而解决问题，因为透明容器将成为底部表单的一部分，所以图标将可见。
因此，结合使用 Stack 和 Positioned 来实现结果：
import 'package:flutter/material.dart';
void main() => runApp(const BottomSheetApp());
class BottomSheetApp extends StatelessWidget {
const BottomSheetApp({super.key});
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Bottom Sheet Sample')),
body: const BottomSheetExample(),
),
);
}
class BottomSheetExample extends StatelessWidget {
const BottomSheetExample({super.key});
@override
Widget build(BuildContext context) => Center(
child: ElevatedButton(
child: const Text('Show ModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return SizedBox(
height: 264,
child: Stack(children: [
Column(children: [
Container(
height: 64,
color: Colors.transparent,
),
Container(
height: 200,
width: double.infinity,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Center(child: Text('Well done')),
const SizedBox(height: 8.0),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
),
]))
]),
Positioned(
left: MediaQuery.of(context).size.width / 2 - 32,
top: 32,
child: const CircleAvatar(
radius: 32,
backgroundColor: Colors.green,
child: Icon(Icons.check, size: 24),
)),
]));
},
);
},
),
);
}
这是你提供的代码的翻译部分。
英文:
What you can do is create the bottom sheet as a column of two containers, and the first (bottom) container with transparent background. This way you can overcome the problem because the transparent container will be a part of the bottom sheet, and since you can put the icon (circle avatar etc.) "above" this container with Stack, the icon will be visible.
So combine Stack and Positioned to achieve the result:
import 'package:flutter/material.dart';
void main() => runApp(const BottomSheetApp());
class BottomSheetApp extends StatelessWidget {
const BottomSheetApp({super.key});
@override
Widget build(BuildContext context) => MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Bottom Sheet Sample')),
body: const BottomSheetExample(),
),
);
}
class BottomSheetExample extends StatelessWidget {
const BottomSheetExample({super.key});
@override
Widget build(BuildContext context) => Center(
child: ElevatedButton(
child: const Text('Show ModalBottomSheet'),
onPressed: () {
showModalBottomSheet<void>(
context: context,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return SizedBox(
height: 264,
child: Stack(children: [
Column(children: [
Container(
height: 64,
color: Colors.transparent,
),
Container(
height: 200,
width: double.infinity,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Center(child: Text('Well done')),
const SizedBox(height: 8.0),
ElevatedButton(
child: const Text('Close BottomSheet'),
onPressed: () => Navigator.pop(context),
),
]))
]),
Positioned(
left: MediaQuery.of(context).size.width / 2 - 32,
top: 32,
child: const CircleAvatar(
radius: 32,
backgroundColor: Colors.green,
child: Icon(Icons.check, size: 24),
)),
]));
},
);
},
),
);
}
答案2
得分: -1
以下是您提供的代码的翻译部分：
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return CustomBottomSheet();
},
);
class CustomBottomSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
alignment: Alignment.center,
children: [
Container(
height: 200,
width: double.infinity,
color: Colors.grey,
),
Positioned(
top: -50,
child: ClipOval(
child: Container(
color: Colors.white,
width: 100,
height: 100,
child: Icon(
Icons.arrow_circle_right_rounded,
size: 50,
),
),
),
),
],
),
//添加您需要的其他小部件。
],
),
);
}
}
请注意，我已经翻译了代码的主要部分，不包括注释和其他不需要翻译的内容。如果您需要进一步的帮助，请随时告诉我。
英文:
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return CustomBottomSheet();
},
);
class CustomBottomSheet extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Stack(
alignment: Alignment.center,
children: [
Container(
height: 200,
width: double.infinity,
color: Colors.grey,
),
Positioned(
top: -50,
child: ClipOval(
child: Container(
color: Colors.white,
width: 100,
height: 100,
Icon(Icons.arrow_circle_right_rounded,
size: 50
),
),
),
),
],
),
//add more widgets you need.
],
),
);
}
}
Here call the bottomsheet and I have given an icon. Use whatever Icon or image you wish to add. Just added a stack in the bottomsheet.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论