如何将标题卡添加到颤动卡

Posted 2023-02-22

【中文标题】如何将标题卡添加到颤动卡

【英文标题】：How can I add a header card to a flutter card

【发布时间】：2021-01-25 16:37:08

【问题描述】：

我正在尝试添加一个标题卡，它将显示在颤动卡的左上角，到目前为止我还无法实现。 This is an example of what I want

【参考方案1】：

作为 Flutter 的新手，我不知道有 Stack 小部件。解决方案是将两张卡片堆叠在 Positioned 小部件中。

class SummaryCard extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Stack(
      children: <Widget>[
        Positioned(
          left: 0,
          top: 40,
          height: 200,
          width: 350,
          child: Card(
            color: Colors.blue,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20)
            ),
          ),
        ),
        Positioned(
          left: 20,
          top: 0,
          height: 100,
          width: 100,
          child: Card(
            color: Colors.green,
            elevation: 10.0,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20)
            ),
          ),
        ),
      ],
    );
  

【参考方案2】：

你需要用 Align Widget 包裹 header card。

这是完整的代码：

class Cards extends StatefulWidget 


@override
  _CardsState createState() => _CardsState();


class _CardsState extends State<Cards> 
  @override
  Widget build(BuildContext context) 
    return Container(
      height: 200,
      width: 200,
      child: Card(
        elevation: 20,
        child: Align(
          alignment: Alignment.topLeft,
          child: Container(
            width:100,
            height: 60,
            child: Card(
              elevation: 10,
              child: Text("header"),
            ),
          ),
        ),
      ),
    );
  

容器仅用于高度和宽度控制。

这是一个截图：

【讨论】：

您的解决方案在父卡的范围内添加了第二张卡，这不是我想要的。

所以你能更精确一点吗？所以我可以为你创建代码

根据我的图片，你想改变什么？