【问题标题】:Slidable ListTile overlays parent in Flutter滑动 ListTile 覆盖 Flutter 中的父级
【发布时间】:2021-06-18 00:00:03
【问题描述】:

它有一些我一直在寻找的好功能,并且可以与我的代码一起使用

我正在尝试制作 ToDo 应用程序,但我遇到了可滑动小部件的问题。 我将Slidable放在ListTile元素中,它似乎覆盖了父级。实际上,如果我指定父级列表的高度,它不会发生,但我不能指定高度父列表,因为它需要在新元素添加到列表时自动设置,这就是我使用 shrinkWrap 属性的原因。

编辑:我找到了完全符合我需要的包。它有一些类似 iOS 的幻灯片功能,甚至还有一些动画。

https://pub.dev/packages/flutter_swipe_action_cell

    Widget build(BuildContext context) {
return Column(
  children: [
    Container(
      margin: EdgeInsets.only(bottom: 20),
      child: Container(
        child: ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: this.widget.listNotes.length,
            itemBuilder: (context, index) {
              var content = this.widget.listNotes[index];
              return Column(
                children: [
                  Align(
                    alignment: Alignment.centerLeft,
                    child: ListTile(
                      title: Container(
                        child: Slidable(
                          controller: slidableController,
                          actionPane: SlidableStrechActionPane(),
                          actionExtentRatio: 0.4,
                          secondaryActions: <Widget>[
                            SlideAction(
                              color: Colors.red,
                              child: Text(
                                'Delete',
                                style: TextStyle(
                                    fontSize: 15, color: Colors.white),
                                maxLines: 1,
                              ),
                              onTap: () => deleteNote(index),
                            ),
                          ],
                          child: Row(
                            children: [
                              Container(
                                child: Transform.scale(
                                  scale: 1.7,
                                  child: Radio(
                                    toggleable: true,
                                    value: '${index}' + 'ok',
                                    groupValue: groupVal,
                                    onChanged: (value) {
                                      setState(() {
                                        groupVal = value;
                                      });
                                    },
                                    activeColor: Color(0xffFFBD11),
                                  ),
                                ),
                              ),
                              InkWell(
                                onTap: () {
                                  print('object');
                                },
                                child: Container(
                                  width: 230,
                                  padding:
                                      EdgeInsets.fromLTRB(0, 10, 12, 12),
                                  margin: EdgeInsets.only(left: 5),
                                  decoration: BoxDecoration(
                                      border: Border(
                                          bottom: BorderSide(
                                              color: Color(0xFFBABABA),
                                              width: 0.5))),
                                  child: Text(
                                    content.note,
                                    style: TextStyle(
                                        color: Colors.black,
                                        fontWeight: FontWeight.w300,
                                        fontSize: 18),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              );
            }),
      ),
    ),

【问题讨论】:

    标签: list flutter listview slide shrinkwrap


    【解决方案1】:

    您好@XRSIL,您的代码有误,因为可滑动的小部件必须是包含 ListTile 的小部件,例如以下示例:

    ListView.builder(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            itemCount: this.widget.listNotes.length,
            itemBuilder: (context, index) { 
                return Slidable(
                         actionPane: SlidableDrawerActionPane(),
                         child: Container(
                         child: ListTile(title: Text('Title'),
                       ),
                      ));
                }
             )
    

    【讨论】:

    • 谢谢,但我也找到了另一个解决方案
    • 如果你看到这个库pub.dev/packages/flutter_slidable 有更多的声誉,这意味着它被更多的开发者使用,如果你有问题,社区可以帮助你
    猜你喜欢
    • 2021-09-11
    • 2022-01-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-14
    • 2021-10-03
    • 1970-01-01
    • 2017-11-30
    相关资源
    最近更新 更多