我如何实现这种底部 sheet 颤动

Question

如何在 flutter 中实现这种底部 sheet？我正在使用 CupertinoActionSheet 来实现这一点，但我只能有一个取消按钮，而在图像中，需要两个。

 final cancelAction = CupertinoActionSheet(
      actions: <Widget>[
        Container(
          color: AppColors.grey8,
          child: CupertinoActionSheetAction(
            child: Text(
              "Please confirm",
              style: TextStyle(
                fontSize: 14.5,
                fontWeight: FontWeight.bold,
                fontFamily: 'Euclid',
                color: Colors.black,
              ),
            ),
            isDefaultAction: true,
            onPressed: () {

            },
          ),
        ),
        Container(
          color: Colors.white,
          child: CupertinoActionSheetAction(
            child: Text(
              "You can always reschedule this appointment to a later date or time if you are currently unavailable",
             
            ),
            isDefaultAction: true,
            onPressed: () {
              print("Action 1 is been clicked");
            },
          ),
        ),
      ],

      cancelButton: Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(14))
        ),
        child: CupertinoActionSheetAction(
          child: Text(
            "Cancel Appointment",
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );

Answer 1

您可以尝试在取消按钮部分添加一列

                     cancelButton: Container(
                      
                      color: CupertinoColors.inactiveGray.withOpacity(0.5),
                      child: Column(
                        
                        children: [
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.all(Radius.circular(14))
                            ),
                            child: CupertinoActionSheetAction(
                              child: Text(
                                "Cancel Appointment",
                              ),
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            ),
                          ),
                          SizedBox(height: 10,),
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.black,
                                borderRadius: BorderRadius.all(Radius.circular(14))
                            ),
                            child: CupertinoActionSheetAction(
                              child: Text(
                                "Reschedule",
                              ),
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            ),
                          ),
                        ],
                      ),
                    ),

Answer 2

检查这个让我知道

import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: HomePage(),
        );
      }
    }
    
    class HomePage extends StatefulWidget {
      @override
      _HomePageState createState() => _HomePageState();
    }
    
    class _HomePageState extends State<HomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text("CupertinoActionSheet"),
          ),
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                final action = CupertinoActionSheet(
                  actions: <Widget>[
                    Container(
                      color: Colors.grey,
                      child: CupertinoActionSheetAction(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            "Please confirm",
                            style: TextStyle(
                              fontSize: 14.5,
                              fontWeight: FontWeight.bold,
                              fontFamily: 'Euclid',
                              color: Colors.black,
                            ),
                          ),
                        ),
                        isDefaultAction: true,
                        onPressed: () {},
                      ),
                    ),
                    Container(
                      color: Colors.white,
                      child: CupertinoActionSheetAction(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                              "You can always reschedule this appointment to a later date or time if you are currently unavailable",
                              style: TextStyle(fontSize: 12)),
                        ),
                        isDefaultAction: true,
                        onPressed: () {
                          print("Action 1 is been clicked");
                        },
                      ),
                    ),
                  ],
                  cancelButton: Container(
                      color: CupertinoColors.inactiveGray.withOpacity(0.5),
                      child: Column(
                        children: [
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20))),
                            child: CupertinoActionSheetAction(
                              child: Text("Cancel Appointment",
                                  style: TextStyle(color: Colors.red)),
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Container(
                            decoration: BoxDecoration(
                                color: Colors.black,
                                borderRadius:
                                    BorderRadius.all(Radius.circular(20))),
                            child: CupertinoActionSheetAction(
                              child: Text(
                                "Reschedule",
                              ),
                              onPressed: () {
                                Navigator.pop(context);
                              },
                            ),
                          ),
                        ],
                      )),
                );
    
                showCupertinoModalPopup(
                    context: context, builder: (context) => action);
              },
              child: Text("Click me "),
            ),
          ),
        );
      }
    }

Answer 3

这是您的 bottomSheet 的完整代码

showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) {
        return Container(
          height: 350,
          child: Column(
            children: <Widget>[
              Container(
                height: 180,
                width: MediaQuery.of(context).size.width - 40,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                ),
                child: Column(
                  children: [
                    Container(
                      height: 50,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(15),
                          topRight: Radius.circular(15),
                        ),
                        color: Color(0XFFEAEDF6),
                      ),
                      alignment: Alignment.center,
                      child: Text(
                        'Please confirm',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        padding: const EdgeInsets.all(10),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(15),
                            bottomRight: Radius.circular(15),
                          ),
                          color: Colors.white,
                        ),
                        alignment: Alignment.center,
                        child: Text(
                          "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s",
                          textAlign: TextAlign.center,
                          style: TextStyle(
                            color: Colors.grey,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: 20),
              SizedBox(
                width: MediaQuery.of(context).size.width - 40,
                height: 50,
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text(
                    'Cancel Appoinment',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.red,
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.white),
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(25.0),
                      ),
                    ),
                  ),
                ),
              ),
              SizedBox(height: 10),
              SizedBox(
                width: MediaQuery.of(context).size.width - 40,
                height: 50,
                child: ElevatedButton(
                  onPressed: () {},
                  child: Text(
                    'Reschedule',
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.black),
                    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(25.0),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        );
      },
    );

输出：

我如何实现这种底部 sheet 颤动

How do I achieve this type of bottom sheet flutter

flutter

dart

bottom-sheet