flutter - Slidable Widget 滑动时显示垂直线

问题描述

我正在使用Slidable Widget，它工作得很好，但是在滑动我的容器时有一个奇怪的行为。这是显示不应出现的垂直线的代码和 GIF。

编辑：我在好友列表中使用此幻灯片功能。因此我在一个循环中调用 createSlidable() 。在Slidable Widget 中，还有另一种创建子容器getFriendContainer() 的方法。

  Widget getFriendContainer(Friend friend, int i) {
    return Container(
      padding: const EdgeInsets.only(left: 10.0, right: 10.0, top: 20, bottom: 10.0),
      decoration: BoxDecoration(
        color: Color.fromRGBO(13, 13, 56, 1.0),
        borderRadius: i==0 ? BorderRadius.only(
          topLeft: Radius.circular(25.0),
          topRight: Radius.circular(25.0),
        ) : null,
      ),
    child: Row(
      children: <Widget>[
        Expanded(
          flex: 15,
          child: Column(
            children: <Widget>[
              Container(
                padding: const EdgeInsets.all(9.0),
                height: 40.0,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: Color.fromRGBO(119, 119, 136, 1.0), width: 0.5),
                ),
                child: Image.asset('assets/icon.png', width: 70.0, height: 70.0, color:  Color.fromRGBO(119, 119, 136, 1.0),),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 70,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                  padding: const EdgeInsets.only(left: 10.0),
                  child: Text(
                    "${friend.name}",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 14.0,
                      color: Colors.white,
                    ),
                  )
              ),
            ],
          ),
        ),
        Expanded(
          flex: 15,
          child: friend.muted ? friendMutedIcon(friend) : Container(),
        ),
      ],
      ),
    );
}

Widget createSlidable(Friend friend, int i) {
    return Slidable(
      actionPane: SlidableDrawerActionPane(),
      controller: _slidableController,
      actionExtentRatio: 0.15,
      child: ...,
      secondaryActions: <Widget>[
        SlideAction(
          color: getFriendContainer(Friend friend, int i),
          onTap: () {

          },
          child: Container(
            height: 50.0,
            width: 100.0,
            decoration: BoxDecoration(
              color: ...,
              borderRadius: BorderRadius.only(
                topLeft: const Radius.circular(25.0),
                bottomLeft: const Radius.circular(25.0),
              ),
            ),
            child: Icon(Icons.volume_off, color: ...,),
          ),
        ),
        SlideAction(
          color: ...,
          onTap: () {

          },
          child: Container(
            height: 50.0,
            width: 100.0,
            color: ...,
            child: Icon(Icons.delete, color: ...,),
          ),
        ),
      ],
    );
}

我将不胜感激任何帮助。

标签： flutter

flutter - Slidable Widget 滑动时显示垂直线 - Flutter_slidable

问题描述

解决方案

推荐阅读