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

将卡部分覆盖在图像上

1 个答案: