如何將標題卡添加到顫振卡

Question

我正在嘗試添加一個標題卡，該卡將顯示在顫動卡的左上邊緣，到目前為止我還沒有實現這一點。 這是我想要的一個例子

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

Answer 2

您需要使用 Align Widget 包裝標題卡。

這是一個完整的代碼：

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

容器僅用於高度和寬度控制。

這是一個屏幕截圖：