【问题标题】: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

【问题讨论】:

    标签: flutter material-design flutter-layout


    【解决方案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"),
                  ),
                ),
              ),
            ),
          );
        }
      }
      

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

      这是一个截图:

      【讨论】:

      • 您的解决方案在父卡的范围内添加了第二张卡,这不是我想要的。
      • 所以你能更精确一点吗?所以我可以为你创建代码
      • 根据我的图片,你想改变什么?
      猜你喜欢
      • 2019-01-20
      • 1970-01-01
      • 1970-01-01
      • 2021-10-23
      • 2019-07-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多