颤动布局中的卡片视图

Posted 2023-02-23

【中文标题】颤动布局中的卡片视图

【英文标题】：cardview in flutter layout

【发布时间】：2020-05-24 05:27:17

【问题描述】：

我希望代码设计一个具有所有属性的卡片视图：

【问题讨论】：

这很简单。如果您阅读documentation，您会在其中找到所有内容。

【参考方案1】：

见

https://api.flutter.dev/flutter/material/Card-class.html

https://api.flutter.dev/flutter/widgets/Row-class.html

https://api.flutter.dev/flutter/material/CircleAvatar-class.html

如果您仍有疑问，请发布您尝试过的代码。

【参考方案2】：

Padding(
        padding: EdgeInsets.all(20),
              child: Card(
          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
          elevation: 5,
          color: Colors.white,
          child: Row(children: [

            Padding(
              padding: EdgeInsets.all(10),
                          child: Card(
                  shape: CircleBorder(),
                  elevation: 10,
                  color: Colors.white,
                  child: Icon(Icons.account_circle, color: Colors.black, size: 100)),
            ),

            Padding(
              padding: EdgeInsets.all(10),
                          child: Card(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20)),
                      elevation: 10,
                  color: Colors.green[400],
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text('@anonymous',
                        style: TextStyle(
                            color: Colors.black, fontWeight: FontWeight.bold)),
                  )),
            )
          ])),
      )

【参考方案3】：

您可以根据需要修改和添加相关字段！

return Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        color: Colors.white,
        child: Row(children: [
          SizedBox(
            width: 30,
          ),
          Card(
              shape: CircleBorder(),
              color: Colors.white,
              child: Icon(Icons.account_circle, color: Colors.black, size: 50)),
          SizedBox(
            width: 30,
          ),
          Card(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10)),
              color: Colors.green[800],
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('@anonymous',
                    style: TextStyle(
                        color: Colors.black, fontWeight: FontWeight.bold)),
              ))
        ]));