flutter - 将卡片部分叠加在图像上

Question

我正在尝试使用 Stack 在图像上部分覆盖 Card，就像这样

这就是我尝试过的

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Container(
          margin: const EdgeInsets.all(10.0),
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ClipRRect(
                child: Image.asset("assets/images/placeholder.jpg"),
                borderRadius: new BorderRadius.circular(8.0),
              ),  // image
              new Positioned(
                  child: Card(
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        ListTile(
                          title: Text('1625 Main Street',
                              style: TextStyle(fontWeight: FontWeight.w500)),
                          subtitle: Text('My City, CA 99984'),
                          leading: Icon(
                            Icons.restaurant_menu,
                            color: Colors.blue[500],
                          ),
                        ),
                      ],
                    ),
                  ) //card
              )
            ],
          )),
    );
  }

然而，它在图像底部显示卡片，但试图在 Stack 的 bottom、top 参数的帮助下将其部分重叠在图像上，使得卡片不一起展示。我该怎么做？

Answer 1

我认为问题是当您制作堆栈时，您没有允许它适本地调整自己的大小。堆栈大小适合任何未定位的子级 - 在您的情况下为 ClipRRect。 ClipRRect 看起来像是根据其子图像调整大小，子图像具有已定义的高度。所以我相信堆栈也将是这个大小(您可以打开调试绘画来查看)。

看起来您希望图像和白色作为整个页面的背景，这意味着您应该让堆栈扩展到页面的大小。将您的图像包裹在对齐中应该可以做到这一点。

下一部分是定位卡片，但未定义任何参数。您至少要定义顶部，但可能还要定义左侧和右侧。

这对我有用(虽然我没有使用所有相同的小部件，但无论如何它应该适用):

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Card over stack"),
        ),
        body: Stack(
          children: <Widget>[
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                decoration:
                    BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(10.0)), color: Colors.lightBlueAccent),
                height: 100,
              ),
            ),
            Positioned(
              top: 60,
              right: 10,
              left: 10,
              child: Card(
                child: ListTile(
                  title: Text('1625 Main Street', style: TextStyle(fontWeight: FontWeight.w500)),
                  subtitle: Text('My City, CA 99984'),
                  leading: Icon(
                    Icons.restaurant_menu,
                    color: Colors.blue[500],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}