flutter 底部弹出框+dialog

底部弹出

getx模式

Get.bottomSheet(
    isScrollControlled: false,
    backgroundColor: AppColors.primaryBackground,
    isDismissible: false,
    enableDrag: false,
    Container(
      height: 500,
      padding: EdgeInsets.all(8.0),
      width: double.infinity,
      decoration: const ShapeDecoration(
        color: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
        ),
      ),
      // color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            child: Row(
              children: [
                Container(
                  child: Expanded(
                      child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Text("title"),
                      Positioned(
                          right: 16,
                          child: IconButton(
                            onPressed: () {
                              Get.back();
                            },
                            icon: const Icon(
                              Icons.highlight_off,
                            ),
                          ))
                    ],
                  )),
                )
              ],
            ),
          ),
        ],
      ),
    ));

原生模式

  Container _buildBottomSheet(context) {
      return Container(
        height: 400,
        padding: const EdgeInsets.all(8.0),
        decoration: BoxDecoration(
            border: Border.all(color: Colors.transparent, width: 2.0),
            borderRadius: BorderRadius.circular(16.0),
            color: Colors.white
        ),
        child:,
      );
  }

原生模式使用方法:

 onTap:(){
   showModalBottomSheet<void>(
       context: context,
       enableDrag:false,
       builder: (BuildContext context) {
         return _buildBottomSheet(context);
       });
 },

dialog

showDialog(context: context,
    barrierDismissible:false,
    builder: (context) {
      return  Theme(
        data: ThemeData(
          dialogBackgroundColor: Colors.white,
        ),
        child: AlertDialog(
          content: Container(
            width: 100,
            height: 100,
            child: Center(
              child: Text("是否保存为草稿?"),
            ),
          ),
          actionsAlignment:MainAxisAlignment.spaceAround,
          actions:[
            TextButton(
                onPressed: (){
                  onDraftBoxSave();
                  toastInfo(text: "保存成功");
                  Get.close(2);
                },
                child: Text("保存并退出")
            ),
            TextButton(
                onPressed: (){
                  // Navigator.pop(context);
                  Get.close(2);
                },
                child: Text("直接退出",style: TextStyle(
                    color: AppColors.primaryText
                ),)
            ),

          ],
        ),
      );
 });
posted @ 2024-01-09 10:14  吾爱吃鱼  阅读(344)  评论(0)    收藏  举报