0

我有一个 ListTile 包裹在一个容器中，当我用 Dismissible 包裹它并滑动时，它会重叠并越过主容器。如这个 gif 所示。1

这是我的主容器的代码：

Container(
                    height: 500,
                    width: 500,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: FutureBuilder<List<EntryRecord>>(
                      future: _getAllRecords(user),
                      builder:
                          (BuildContext context, AsyncSnapshot snapshot) {
                        if (snapshot.hasData) {
                          return ListView.builder(
                   
                              itemCount: snapshot.data.length,
                              itemBuilder:
                                  (BuildContext context, int index) {
                                return Dismissible(
                                  direction: DismissDirection.endToStart,
                                  key: ObjectKey(snapshot.data[index]),
                                  onDismissed: (direction) {
                                    ScaffoldMessenger.of(context)
                                        .showSnackBar(
                                      SnackBar(
                                        content: Text(
                                            "${snapshot.data[index].number} has been deleted"),
                                      ),
                                    );
                                  },
                            
                                  child: EntryCard(
                                    record: snapshot.data[index],
                                    index: index,
                                  ),
                                );
                              });
                        } else {
                          return Center(
                            child: CircularProgressIndicator(),
                          );
                        }
                      },
                    ),
                  )

这是 EntryCard 小部件的代码（使用 ListView.builder 构建的）

class EntryCard extends StatelessWidget {


EntryRecord record;
  int index;
  EntryCard({Key key, this.record, this.index}) : super(key: key);
  List<Color> colors = [kLightOrange, kLightPurple, kLightBlue, kLightPink];
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.white, TinyColor(colors[index]).darken(8).color],
            begin: Alignment.centerLeft,
            end: Alignment.centerRight),
        borderRadius: BorderRadius.circular(20),
      ),
      child: ListTile(
        onTap: () {},
        title: Text(
          record.title,
          style: TextStyle(
              color: TinyColor(colors[index]).darken(30).color,
              fontWeight: FontWeight.w500),
        ),
        subtitle: Text(record.url,
            style: TextStyle(color: Colors.grey, fontWeight: FontWeight.w500)),
        leading: Container(
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: TinyColor(colors[index]).darken(30).color),
          alignment: Alignment.center,
          width: 80,
          height: 200,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              record.number.toString(),
              textAlign: TextAlign.center,
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.w900),
            ),
          ),
        ),
        trailing: Icon(
          Icons.share_outlined,
          color: Colors.white,
        ),
        // tileColor: Color(0xFFF2784B),
      ),
    );
  }
}

我什至尝试在 Dismissible 小部件中仅扭曲 ListTile 小部件，它给了我类似的结果。

4

0 回答 0