在图像上部分叠加卡片

Question

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

所以这就是我的尝试

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