我如何在Flutter中使用叠加？

slhcrj9b 于 2023-04-13 发布在 Flutter

关注(0)|答案(1)|浏览(155)

我有一个这样的设计：

当我点击价格图标时，会出现一个叠加和2个按钮，就像设计中一样。我试图使用模态障碍，但我做不到。我在布局上放置了一个堆栈，当我点击按钮时，它会出现模态障碍，但我无法显示高亮按钮。顺便说一下，我正在使用GetX，但我需要了解我如何做到这一点。这是我尝试的：

Stack(
      children: [
        ClassicLayout(
          backgroundColor: Colors.white,
          appBarRequirements: ClassicLayoutAppBarRequirements(
            appBarPadding: const EdgeInsets.symmetric(
              vertical: 20,
            ),
            gradientColors: [
              ColorService.notrGray245,
              ColorService.notrGray245,
            ],
            customAppbar: Column(
              children: [
                SizedBox(
                  height: 50,
                  width: Get.width,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Positioned(
                        left: 0,
                        child: IconButton(
                          onPressed: () {},
                          icon: SvgPicture.asset(SvgIcon.chevronLeft),
                        ),
                      ),
                      Text(
                        Keywords.myAdvertsHistory.translatedValue,
                        style: const TextStyle(
                          fontWeight: FontWeight.w700,
                          fontSize: 20,
                        ),
                      ),
                    ],
                  ),
                ),
                Row(
                  children: const [
                    // SingleSelectDropdown(
                    //   dropdownRequirements: SingleSelectDropdownRequirements(
                    //     context: context,
                    //     options: [],
                    //     tag: "myAdvertHistoryDate",
                    //     getProperty: (p0) => null,
                    //     getIdProperty: getIdProperty,
                    //   ),
                    // ),
                  ],
                )
              ],
            ),
          ),
          child: ListView.separated(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
            itemBuilder: (context, index) {
              return Column(
                children: [
                  ElevatedButton(
                    onPressed: () {
                      ShowCaseWidget.of(context).startShowCase([keys[index]]);
                    },
                    child: const Text("abc"),
                  ),
                  WorkCard(
                    isMine: true,
                    isPast: true,
                    index: index,
                    // globalKey: keys[index],
                    isDateFinished: index % 2 == 0,
                  ),
                ],
              );
            },
            separatorBuilder: (context, index) {
              return const SizedBox(height: 12);
            },
            itemCount: 5,
          ),
        ),
        Obx(
          () => Visibility(
            visible: controller.isOverlayDisplay.value,
            child: ModalBarrier(
              color: Colors.black.withOpacity(0.6),
            ),
          ),
        ),
      ],
    );

但是当我这样做的时候，我不能突出显示所选的卡片，也不能像这样显示2个按钮。我该怎么做呢？谢谢你的回复！祝你有美好的一天！

flutter

来源：https://stackoverflow.com/questions/75983395/how-can-i-use-overlay-in-flutter

1条答案

按热度按时间

fhity93d1#

有一个很流行的软件包叫做flutter_speed_dial（https://pub.dev/packages/flutter_speed_dial），它提供了对自定义的绝对控制，因此很容易获得所需的输出
完整代码：-

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        title: 'Test App',
        home: SafeArea(
            child: Scaffold(
          body: Body(),
        )));
  }
}

class Body extends StatefulWidget {
  const Body({Key? key}) : super(key: key);

  @override
  _BodyState createState() => _BodyState();
}

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SpeedDial(
                switchLabelPosition: true,
                icon: Icons.close,
                foregroundColor: Colors.black,
                spacing: 5,
                buttonSize: const Size(45, 45),
                elevation: 0,
                overlayOpacity: 0.4,
                overlayColor: Colors.black,
                backgroundColor: Colors.white,
                shape: const RoundedRectangleBorder(
                    side: BorderSide(width: 0.2),
                    borderRadius: BorderRadius.all(Radius.circular(10))),
                children: [
                  SpeedDialChild(
                    labelWidget: Container(
                      height: 40,
                      decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      child: Row(
                        children: const [
                          SizedBox(
                            width: 10,
                          ),
                          Icon(Icons.check),
                          SizedBox(
                            width: 10,
                          ),
                          Text("First"),
                          SizedBox(
                            width: 15,
                          ),
                        ],
                      ),
                    ),
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                  ),
                  SpeedDialChild(
                    labelWidget: Container(
                      height: 40,
                      decoration: const BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      child: Row(
                        children: const [
                          SizedBox(
                            width: 10,
                          ),
                          Icon(Icons.circle_outlined),
                          SizedBox(
                            width: 10,
                          ),
                          Text("Second"),
                          SizedBox(
                            width: 15,
                          ),
                        ],
                      ),
                    ),
                    shape: const RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))),
                  ),
                ],
                child: const Icon(Icons.attach_money_outlined)),
            const SizedBox(
              width: 5,
            ),
            const Text(
              '1600',
              style: TextStyle(fontSize: 25, fontWeight: FontWeight.w600),
            )
          ],
        ),
      )),
    );
  }
}

输出：-

赞(0）回复(0）举报 2023-04-13

我来回答

我如何在Flutter中使用叠加？

1条答案

相关问题

热门标签

最新问答