【问题标题】:Dismissible content going outside可忽略的内容
【发布时间】:2021-04-28 02:14:32
【问题描述】:

我有一个带有 Widget 列表的屏幕,每个 Widet 都是一个 Dismissible,里面有一个 ListTile,但是当我滑动时,内容在外面(如红色箭头所示),这可能是由于填充而发生的Dismissible 周围。有办法解决吗?

【问题讨论】:

    标签: flutter mobile dismissible


    【解决方案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(),
        );
      }
    }
    

    输出:

    【讨论】:

    • 它有效,margin 属性为我解决了。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-11-03
    • 2011-06-16
    • 2010-12-16
    • 1970-01-01
    相关资源
    最近更新 更多