颤振滑动轮答案

【问题标题】：Flutter Slidable round颤振滑动轮
【发布时间】：2022-07-25 13:06:59
【问题描述】：

我正在使用来自flutter_slidable 包的Slidable。我想对我的Slidable 进行四舍五入。具体怎么做？

我的代码：

          return Slidable(
                    key: Key(packlists[index].toString()),
                    endActionPane: ActionPane(
                      motion: BehindMotion(),
                      children: [
                        SlidableAction(
                          flex: 2,
                          onPressed: null,
                          backgroundColor: Color(0xFF7BC043),
                          foregroundColor: Colors.white,
                          icon: Icons.delete,
                          label: 'Löschen',
                        ),
                      ],
                    ),
                    child: PackListCard(
                      title: 'Packliste',
                      subtitle: DateFormat.yMMMMd('de_DE')
                          .format(packlists[index].date),
                      icon: Icon(Icons.list_alt),
                      checked: packlists[index].checked,
                    ),
                  );

屏幕

我想要带圆角的绿色部分 (BorderRadius)

我尝试使用容器

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

ActionPane 的孩子允许小部件，您可以使用带有装饰的Container 而不是使用SlidableAction。

endActionPane: ActionPane(
  motion: BehindMotion(),
  children: [
    Expanded(
      child: Align(
        alignment: Alignment.centerRight,
        child: InkWell(
          onTap: () {},
          borderRadius: BorderRadius.circular(16),
          child: Container(
              alignment: Alignment.center,
              width: 24 * 4, // space for actionPan
              decoration: BoxDecoration(
                  color: Color(0xFF7BC043),
                  borderRadius: BorderRadius.circular(16)),
              child: Icon(
                Icons.delete,
                color: Colors.white,
              )),
        ),
      ),
    )
  ]

如果您发现任何问题，请在Slidable 的child: Container 上提供宽度作为屏幕宽度。

【讨论】：

我怎样才能把它一直到右边？这样它就不会向中间打开
检查更新答案，
但我如何让它也只进入 24*4 推送而不是中间？
对不起，我不知道，根据这个包我发现它只能滑动到中间

【解决方案2】：

您可以像这样使用自定义操作

endActionPane: ActionPane(
                          motion: const ScrollMotion(),
                          extentRatio: 0.3,
                          children: [
                            Builder(builder: (sContext) {
                              return Expanded(
                                  child: RoundedIconWidget(
                                onClickIcon: () =>
                                    Slidable.of(sContext)?.close(),
                                icon: Icon(
                                  Icons.delete_rounded,
                                  color: Colors.red,
                                ),
                              ));
                            }),
                            Container(
                              width: 0.5,
                              height: 24,
                              color: AppColors.ITEM_BORDER_COLOR,
                            ),
                            Builder(builder: (context) {
                              return Expanded(
                                child: RoundedIconWidget(
                                  onClickIcon: () =>
                                      {Slidable.of(context)?.close()},
                                  icon: Icon(
                                    Icons.mode_edit_rounded,
                                    color: Colors.blueAccent,
                                  ),
                                ),
                              );
                            }),
                          ],
                        )

【讨论】：