Question

我有以下卡片：

Card(
    semanticContainer: true,
    clipBehavior: Clip.antiAliasWithSaveLayer,
    child: Image.network(
        item['thumb'],
        fit: BoxFit.cover,
    ),
    shape: BeveledRectangleBorder(
        borderRadius: BorderRadius.only(
        topLeft: Radius.circular(24),
        ),
    ),
    elevation: 0,
);

我希望添加可点击的墨水池功能。

我尝试了以下操作，但图像不再适合卡片：

Card(
    semanticContainer: true,
        clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                    Image.network(
                        item['thumb'],
                        fit: BoxFit.cover,
                    ),
                    InkWell(
                        splashColor: Colors.grey.withAlpha(30),
                        onTap: () {
                            print('Card tapped.');
                        },
                    ),
                ]
            ),
        shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(24),
            ),
        ),
    elevation: 0,
);

我如何能够保留卡片的高度和宽度约束并剪辑图像（使用 BoxFit.cover），以便第二个示例在视觉上与第一个示例相同 - 并添加了墨水池功能？

Answer 1

Inkwell 要求孩子对其执行点击事件，因此您在那里缺少孩子。

示例：

   InkWell(
          onTap: (){print("Clicked on Container");},
          child: new Container(
            width: 200.0,
            height: 200.0,
          ),
        ),

Answer 2

尝试以下方式使用 onTap 属性。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.red,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: InkWell(
          splashColor: Colors.grey.withAlpha(30),
          onTap: () {
            print('Card tapped.');
          },
          child: Card(
            semanticContainer: true,
            clipBehavior: Clip.antiAliasWithSaveLayer,
            child: Image.network(
              item['thumb'],
              fit: BoxFit.cover,
            ),
            shape: BeveledRectangleBorder(
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(24),
              ),
            ),
            elevation: 0,
          ),
        ));
  }
}

Answer 3

您需要像这样将图像放入 expo-cli 中：

InkWell

Answer 4

此外，您可能需要将 InkWell 包装在 Material 中。在某些情况下可能需要这样做才能看到涟漪效应。

比如，

Material(
   child: InkWell(...)
)

将墨水池添加到卡片

4 个答案: