如何在flutter中将小部件放置在ModalBottomSheet之外?我有一个图标,我想把它放在ModalBottomSheet之外,如下图所示
请提供我的代码来实现这样一个小部件
u4dcyp6a1#
您可以做的是将底部工作表创建为两个容器的列,第一个(底部)容器具有透明背景。这样你就可以克服这个问题,因为透明的容器将是底部工作表的一部分,而且因为你可以用Stack把图标(圆圈头像等)放在这个容器的“上方”,所以图标将是可见的。因此,将Stack和Positioned组合起来即可得到结果:
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), )), ])); }, ); }, ), ); }
vd8tlhqk2#
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. ], ), ); } }
这里调用底部表和我已经给出了一个图标。使用您想要添加的任何图标或图像。只是在底部添加了一个堆栈。
2条答案
按热度按时间u4dcyp6a1#
您可以做的是将底部工作表创建为两个容器的列,第一个(底部)容器具有透明背景。这样你就可以克服这个问题,因为透明的容器将是底部工作表的一部分,而且因为你可以用
Stack
把图标(圆圈头像等)放在这个容器的“上方”,所以图标将是可见的。因此,将
Stack
和Positioned
组合起来即可得到结果:vd8tlhqk2#
这里调用底部表和我已经给出了一个图标。使用您想要添加的任何图标或图像。只是在底部添加了一个堆栈。