为什么 Card 小部件不将所有项目包装在 Wrap 小部件中？

Question

最初，我创建了一个 Column 来显示所有内部元素，例如带有图像、图标、文本的 Container Widget。 Column 小部件挤压内部物品，因此我将 Column 更改为 Wrap 小部件；它解决了问题。

但是，当我尝试设置 onPressed/onTap 逻辑时在垂直轴上只有一半的项目是可点击的。作为一个实验，我用 Card 小部件包裹了 Wrap 小部件，以查看覆盖了哪些区域。 事实证明，卡片小部件恰好覆盖了可点击的垂直部分。

为了形象化，我提供了这个 UI 屏幕截图

我试过了：

1. 设置一个固定大小的容器来改变 Card 小部件的几何形状
2. 设置一个大小合适的盒子并按照 1 中的步骤进行操作。
3. 将可扩展元素设置为内部元素

这些是我使用的一些解决方案，但是，它们都不起作用。

那么对于可能导致此问题的原因有什么建议？什么是解决方案？

此处提供代码：

Widget _buildWomanProductContainer({
required double width,
required double height,
required String imagePath,
required String clothProductName,
required String clothType,
required String clothPrice,}) {
return InkWell(
  onTap: () => Navigator.of(context).push(MaterialPageRoute(
    builder: (context) => WomenProductScreen(),
  )),
  child: Card(
    child: Wrap(
      alignment: WrapAlignment.center,
      children: [
        SizedBox(height: 0),
        Stack(
          children: [
            Container(
              width: width,
              height: height,
              child: Image.asset(
                imagePath,
                width: width,
                height: height,
                fit: BoxFit.cover,
                color: Color.fromRGBO(0, 0, 0, 0.4),
                colorBlendMode: BlendMode.darken,
              ),
            ),
            Positioned(
              right: 5,
              bottom: 5,
              child: IconButton(
                alignment: Alignment.center,
                icon: Icon(Icons.favorite,
                    size: 30, color: Color.fromRGBO(255, 255, 255, 1)),
                onPressed: () => {
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: const Text('Сохранено'),
                    duration: const Duration(seconds: 2),
                  ))
                },
              ),
            ),
          ],
        ),
        Column(
          children: [
            const SizedBox(height: 8),
            Text(clothProductName,
                style: TextStyle(
                  color: Color.fromRGBO(58, 67, 59, 1),
                  fontFamily: 'Merriweather-Regular',
                )),
            Text(clothType,
                style: TextStyle(
                    color: Color.fromRGBO(58, 67, 59, 0.5),
                    fontFamily: 'Merriweather-Regular',
                    fontSize: 12)),
            OutlinedButton(
              child: Text(clothPrice,
                  style: TextStyle(
                      color: Color.fromRGBO(58, 67, 59, 1),
                      fontFamily: 'SolomonSans-SemiBold')),
              onPressed: () =>
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: const Text('Сохранено'),
                duration: const Duration(seconds: 2),
              )),
              style: OutlinedButton.styleFrom(
                side: BorderSide(
                    width: 1.0, color: Color.fromRGBO(58, 67, 59, 1)),
              ),
            ),
          ],
        )
      ],
    ),
  ),
);}

更新

Answer 1

你可以试试这个

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Stack(
                children: [
                  Card(
                    color: Colors.transparent,
                    margin: const EdgeInsets.symmetric(
                        horizontal: 20, vertical: 40),
                    elevation: 5,
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(12.0),
                      child: Image.asset(
                        'assets/image.jpeg',
                        fit: BoxFit.fill,
                      ),
                    ),
                  ),
                  Positioned(
                    right: 15,
                    bottom: 35,
                    child: IconButton(
                      alignment: Alignment.center,
                      icon: Icon(Icons.favorite,
                          size: 30, color: Color.fromRGBO(255, 255, 255, 1)),
                      onPressed: () => {
                        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                          content: const Text('Сохранено'),
                          duration: const Duration(seconds: 2),
                        ))
                      },
                    ),
                  ),
                ],
              ),
            ),
            Text('Product name',
                style: TextStyle(
                  color: Color.fromRGBO(58, 67, 59, 1),
                  fontFamily: 'Merriweather-Regular',
                )),
            Text('type',
                style: TextStyle(
                    color: Color.fromRGBO(58, 67, 59, 0.5),
                    fontFamily: 'Merriweather-Regular',
                    fontSize: 12)),
            OutlinedButton(
              child: Text('10000',
                  style: TextStyle(
                      color: Color.fromRGBO(58, 67, 59, 1),
                      fontFamily: 'SolomonSans-SemiBold')),
              onPressed: () =>
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: const Text('Сохранено'),
                duration: const Duration(seconds: 2),
              )),
              style: OutlinedButton.styleFrom(
                side: BorderSide(
                    width: 1.0, color: Color.fromRGBO(58, 67, 59, 1)),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我已经在尽可能小的设备上测试了这段代码，并且没有像素溢出。问题是您将Stack 小部件包装在Expanded 内，它将占用最大的可用空间。在您的情况下无需使用 Wrap 小部件。 截图：