将卡片部分叠加在图像上

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],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

将卡片部分叠加在图像上

Overlay a card partially on an image

flutter

flutter-layout