滑动flutter的列表视图卡

问题描述 投票:0回答:1

花了大约 4 个小时解决问题,包括询问 chtgpt,但没有成功。

我只想构建一个页面,例如将学生列表放置在列表视图的卡片中。用户可以通过刷卡进行删除等操作,甚至是简单的操作。

这是我的示例页面的完整代码。

import 'package:flutter/material.dart';

class page3 extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    backgroundColor: const Color.fromARGB(255, 255, 106, 0),
    toolbarHeight: 51,
    title: const Text('my title here'),
  ),

  body: Container(
    alignment: Alignment.center,
    padding: const EdgeInsets.all(1),
    child: Column(
      children: [
      
    const TextField(
      textAlign: TextAlign.center,
      style:  TextStyle(color: Color.fromARGB(255, 255, 111, 0), fontWeight: FontWeight.w600),
        decoration:  InputDecoration(
        prefixIcon: Icon(Icons.search),
      ),
    ),

Expanded(child: ListView(                        
      children: <Widget>[
                  const Padding(padding: EdgeInsets.symmetric(horizontal: 9),),

      Dismissible(
              key: UniqueKey(), 
              background: Container(
                color: Colors.red, 
                alignment: Alignment.centerRight,
                child: const Icon(Icons.delete, color: Colors.white),
              ),
            secondaryBackground: Container(
              color: Colors.green, 
              alignment: Alignment.centerLeft,
              child: const Icon(Icons.archive, color: Colors.white),
            ),
            onDismissed: (direction) {
              if (direction == DismissDirection.endToStart) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('delete action!')),
                );
              } else if (direction == DismissDirection.startToEnd) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('some action')),
                );
              }
            },
        ),

      
          Card(
            margin: const EdgeInsets.all(3),
            elevation:1,
            color: Color.fromARGB(255, 250, 195, 195),
            child:  ListTile(
              onTap: () {
                ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content:  Text('Gesture Detected!')));
              },
              title: const Text("sample title text"),
              subtitle: const Text("sample subtitle text here"),
              trailing: const Icon(Icons.arrow_forward),
              leading: const CircleAvatar(
              backgroundImage: AssetImage("images/defphoto.png"),
                      ),          
              ),
          ),
          
          //there are other cards here

        ],
       )
      )
      ]
    )
  )
);
}
}

有趣的是,当我删除以 Dimissable(... 开头的块时,一切正常。当我添加纯块时,它显示

 The named parameter 'child' is required, but there's no corresponding argument.
 Try adding the required argument

留言。

当我添加子项或从正文行更改时,它不断返回错误消息。

我真的很想知道我在这里错过了什么。 PS:我复制了类似的页面(完全复制并粘贴页面)但遇到了同样的问题。

谢谢你

flutter listview swipe card
1个回答
0
投票

根据日志中的建议,

Dismissible
小部件必须有一个子组件。

Dismissible(
          key: UniqueKey(), 
          background: Container(
            color: Colors.red, 
            alignment: Alignment.centerRight,
            child: const Icon(Icons.delete, color: Colors.white),
          ),
        secondaryBackground: Container(
          color: Colors.green, 
          alignment: Alignment.centerLeft,
          child: const Icon(Icons.archive, color: Colors.white),
        ),
        onDismissed: (direction) {
          if (direction == DismissDirection.endToStart) {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('delete action!')),
            );
          } else if (direction == DismissDirection.startToEnd) {
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('some action')),
            );
          }
        },
    child: Text('This is a dimissible widget') // add this
    ),
© www.soinside.com 2019 - 2024. All rights reserved.