如何在Flutter中将小部件定位在ModalBottomSheet之外

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

如何在flutter中将小部件放置在ModalBottomSheet之外?
我有一个图标,我想把它放在ModalBottomSheet之外,如下图所示

请提供我的代码来实现这样一个小部件

u4dcyp6a

u4dcyp6a1#

您可以做的是将底部工作表创建为两个容器的列,第一个(底部)容器具有透明背景。这样你就可以克服这个问题,因为透明的容器将是底部工作表的一部分,而且因为你可以用Stack把图标(圆圈头像等)放在这个容器的“上方”,所以图标将是可见的。
因此,将StackPositioned组合起来即可得到结果:

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),
                          )),
                    ]));
              },
            );
          },
        ),
      );
}
vd8tlhqk

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.
    ],
  ),
);
  }
}

这里调用底部表和我已经给出了一个图标。使用您想要添加的任何图标或图像。只是在底部添加了一个堆栈。

相关问题