可滑动的小部件不环绕容器答案

【问题标题】：Slidable widget not wrapping around container可滑动的小部件不环绕容器
【发布时间】：2022-01-19 14:48:28
【问题描述】：

我正在尝试使可滑动小部件像这样环绕子容器：

但它是这样的：

可滑动小部件来自屏幕边缘而不是子小部件，似乎没有动画，它只是在点击时消失。

Slidable(
                  key: UniqueKey(),
                  actionPane: SlidableDrawerActionPane(),
                  actions: [
                    IconSlideAction(
                      color: Colors.redAccent,
                      icon: Icons.delete,
                      onTap: () {
                        todoController.todos.removeAt(index);
                      },
                    )
                  ],
                  child: Container(
                    decoration: BoxDecoration(
                        color: Color(0xFF414141),
                        boxShadow: const [
                          BoxShadow(
                            color: Color(0xFF414141),
                            offset: Offset(2.5, 2.5),
                            blurRadius: 5.0,
                            spreadRadius: 1.0,
                          ), //B
                        ],
                        borderRadius: BorderRadius.circular(14.0)),
                    padding: const EdgeInsets.symmetric(
                        horizontal: 24.0, vertical: 15.0),
                    child: Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment:
                                MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                todoController.todos[index].title,
                                style: GoogleFonts.notoSans(
                                    color: Color(0xFFA8A8A8),
                                    fontSize: 20.0),
                              ),
                            ],
                          ),
                          Divider(
                            color: Color(0xFF707070),
                          ),
                          Text(
                            todoController.todos[index].details,
                            style: GoogleFonts.notoSans(
                                color: Color(0xFFA8A8A8), fontSize: 20.0),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

【问题讨论】：

标签： flutter user-interface flutter-layout slide flutter-getx

【解决方案1】：

你可以像这样在动作小部件中使用自定义容器：-

Widget slideBackground(BuildContext context, Function onTap, String text) {
    return Container(
      height: 80.h,
      width: 120,
      // color: Colors.white,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: Padding(
              padding: const EdgeInsets.only(left: 20),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: IconSlideAction(
                  caption: '',
                  color: Colors.red,

                  closeOnTap: true,
                  icon: Icons.delete,
                  // icon: Icons.delete,
                  onTap: () {
                    showDialog(
                        context: context,
                        builder: (BuildContext context) {
                          return AlertDialog(
                            content: Text(text),
                            actions: <Widget>[
                              CupertinoButton(
                                child: const Text(
                                  "Cancel",
                                  style: TextStyle(color: Colors.black),
                                ),
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                              ),
                              CupertinoButton(
                                child: const Text(
                                  "Delete",
                                  style: TextStyle(color: Colors.red),
                                ),
                                onPressed: () {
                                  onTap();
                                  Navigator.of(context).pop();
                                },
                              ),
                            ],
                          );
                        });
                  },
                ),
              ),
            ),
          )
        ],
      ),
    );
  }```

【讨论】：