0

我有一个带有小部件列表的屏幕,每个 Widet 都是一个 Dismissible,里面有一个 ListTile,但是当我滑动时,内容在外面(如红色箭头所指),这可能是因为 Dismissible 周围的填充. 有办法解决吗?

在此处输入图像描述

4

1 回答 1

1

你没有在你的问题中给出你的代码示例,所以我制作了这种类型的小部件来解决这个问题。请参考代码,(它可能对你有帮助),

class _MyHomePageState extends State<MyHomePage> {
  final itemsList = List<String>.generate(10, (n) => "List item ${n}");

  ListView generateItemsList() {
    return ListView.builder(
      itemCount: itemsList.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
            child: Dismissible(
              key: Key(itemsList[index]),
              background: slideRightBackground(),
              secondaryBackground: slideLeftBackground(),
              child: InkWell(
                  onTap: () {
                    print("${itemsList[index]} clicked");
                  },
                  child: ListTile(
                    tileColor: Colors.yellow,
                      title: Text('${itemsList[index]}'))),
            ),
          );
        }
    );
  }

  Widget slideRightBackground() {
    return Container(
      color: Colors.green,
      child: Align(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            SizedBox(
              width: 20,
            ),
            Icon(
              Icons.edit,
              color: Colors.white,
            ),
            Text(
              " Edit",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
              ),
              textAlign: TextAlign.left,
            ),
          ],
        ),
        alignment: Alignment.centerLeft,
      ),
    );
  }

  Widget slideLeftBackground() {
    return Container(
      color: Colors.red,
      child: Align(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Icon(
              Icons.delete,
              color: Colors.white,
            ),
            Text(
              " Delete",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w700,
              ),
              textAlign: TextAlign.right,
            ),
            SizedBox(
              width: 20,
            ),
          ],
        ),
        alignment: Alignment.centerRight,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: generateItemsList(),
    );
  }
}

输出 :

在此处输入图像描述

于 2021-04-28T04:46:09.287 回答