flutter - 在 Flutter 中单击时，波纹效果出现在自定义列表视图项下

Question

我已经尝试了这个平台和其他平台的许多解决方案，但我的问题仍然存在。我以前做过这个，并成功地在另一个自定义列表视图中涟漪列表视图项目。但这一次我没有得到任何线索，我缺乏。如果这次尝试，以前的解决方案会使事情变得更加混乱。波纹出现在列表视图项下我想要的只是列表视图项做波纹。

class Dashboard extends StatefulWidget {
  @override
  _DashboardState createState() => _DashboardState();
}

class _DashboardState extends State<Dashboard> {

//  Map<String, dynamic> args;

  List<DashboardItem> lst = [
    DashboardItem(
        img: 'assets/sales.png', name: 'Sales', subtitle: 'Your daily sales'),
    DashboardItem(
        img: 'assets/order.png', name: 'Orders', subtitle: 'Your new orders'),
    DashboardItem(
        img: 'assets/report.png',
        name: 'Reports',
        subtitle: 'Your daily reports'),
    DashboardItem(
        img: 'assets/setting.png',
        name: 'Setting',
        subtitle: 'Application setting'),
    DashboardItem(
        img: 'assets/register.png',
        name: 'Register',
        subtitle: 'Close your register'),
    DashboardItem(
        img: 'assets/logout.png', name: 'Logout', subtitle: 'You can rest')
  ];

  @override
  Widget build(BuildContext context) {
//    args = ModalRoute.of(context).settings.arguments;
//    print('Dashboard : ${args['regId']}');

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        elevation: 0.0,
        title: Text('My Dashboard'),
        centerTitle: true,
      ),
      body: LayoutBuilder(
          builder: (context, constraints){
              if(constraints.maxWidth < 600){
                return ListView.builder(
                  itemCount: lst.length,
                  shrinkWrap: true,
                  itemBuilder: (context, position){
                    return Container(
                      padding: position == lst.length ? const EdgeInsets.only(top:16.0) : const EdgeInsets.only(top:16.0, bottom: 16.0),
                      child: InkWell(
                          child: DashboardCard(lst[position]),
                        onTap: (){
                            Toast.show('In List', context);
                        },
                      ),
                    );
                  },
                );
              }
              else{
                return GridView.builder(
                  itemCount: lst.length,
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  itemBuilder: (context, position){
                    return InkWell(
                        child: DashboardCard(lst[position]),
                      onTap: (){
                        Toast.show('In Grid', context);
                      },
                    );
                  },
                );
              }
          },
      ),
    );
  }
}

DashboardCard 类

class DashboardCard extends StatelessWidget {

  final DashboardItem _dashboardItem;
  const DashboardCard(this._dashboardItem);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 230,
        width: 280,
        child: Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 10.0,
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image(
                    image: AssetImage(_dashboardItem.img),
                  fit: BoxFit.contain,
                  width: 80,
                  height: 80,
                ),
                SizedBox(height: 20,),
                Text(
                  _dashboardItem.name,
                  style: TextStyle(
                    fontSize: 25,
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Ubuntu',
                    letterSpacing: 2.0,
                    color: Colors.redAccent,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(3.0),
                  child: Text(
                    _dashboardItem.subtitle,
                    maxLines: 2,
                    textAlign: TextAlign.center,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.normal,
                      letterSpacing: 2.0,
                      color: Colors.grey,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

标签： flutter

Answer 1

问题在于Center您的小部件DashboardCard：

您可以修复它，将您DashboardCard Container widget的小部件包装在InkWell小部件中并将onTap参数传递给DashboardCard构造函数：

class DashboardCard extends StatelessWidget {
  final DashboardItem _dashboardItem;
  final VoidCallback onTap;

  const DashboardCard(
    this._dashboardItem, {
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InkWell(
        onTap: onTap,
        child: Container(
          height: 230,
          width: 280,
          child: Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
            elevation: 10.0,
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image(
                    image: AssetImage(_dashboardItem.img),
                    fit: BoxFit.contain,
                    width: 80,
                    height: 80,
                  ),
                  SizedBox(
                    height: 20,
                  ),
                  Text(
                    _dashboardItem.name,
                    style: TextStyle(
                      fontSize: 25,
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Ubuntu',
                      letterSpacing: 2.0,
                      color: Colors.redAccent,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Text(
                      _dashboardItem.subtitle,
                      maxLines: 2,
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 10,
                        fontWeight: FontWeight.normal,
                        letterSpacing: 2.0,
                        color: Colors.grey,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在其他地方使用它，例如：

 DashboardCard(
      lst[position],
      onTap: () {
        Toast.show('In List', context);
      },
    ),