Listview 項目在 Flutter 中向右滑動打開新屏幕

Question

如何通過滑動到類似於snapchat應用程序的listview項的右側來打開新屏幕。 這是我想要實現的視頻鏈接。 關聯

我嘗試使用 listview slidable 檢查，但沒有導航到新屏幕的選項。 下面是兩個屏幕的示例飛鏢代碼。 通過向右滑動listview項目，我想打開TestPage.dart屏幕。 如何在 Flutter 中實現這一點？

第一頁.dart

ListView.builder(
          itemCount: 10,
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          itemBuilder: (BuildContext context, int index) {
            return Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: [
                  Row(
                    children: [
                      ClipOval(
                        child: Image.network(
                          'https://googleflutter.com/sample_image.jpg',
                          width: 50,
                          height: 50,
                          fit: BoxFit.cover,
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(
                            right: 10.0),
                        child: Column(
                          children: [
                            Row(
                              mainAxisAlignment:
                              MainAxisAlignment
                                  .spaceBetween,
                              children: [
                                Text(
                                  'Person 1',
                                  style: TextStyle(
                                    color: Colors.red
                                  ),
                                ),
                                const FittedBox(
                                  fit: BoxFit.fitWidth,
                                  child: Text(
                                    'last seen at 8:22 PM'
                                )
                              ],
                            ),
                            Padding(
                              padding: const EdgeInsets.only(
                                  top: 5.0),
                              child: SizedBox(
                                width: MediaQuery.of(context)
                                    .size
                                    .width *
                                    0.50,
                                child:Text('test'),
                              ),
                            )
                          ],
                        ),
                      ),],),],),);}),

測試頁.dart

    class TestPage extends StatefulWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.redAccent,
      body: Container(),
    );
  }
}

Answer 1

您可以使用這樣的 Dismissible 小部件來做到這一點：

ListView.builder(itemBuilder: ((context, index) => Dismissible(
  key: UniqueKey(),
  child: ListTile(),
  direction: DismissDirection.startToEnd,
  onDismissed: (DismissDirection dismissDirection){
    Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: DetailScreen()));
  },

)
)
);