(10)、Study Flutter Card Widget组件学习

一个类似卡片一样的widget。和Android的CardView效果类似，卡片有略微圆角和阴影。

Card Widget 属性学习

• color ：容器背景颜色

• elevation： Z轴高度，实现阴影效果。

• shape ：定义容器的形状

• margin：外边距

• clipBehavior：剪切内容的方式

       body: Container(
          alignment: Alignment.topCenter,
          margin: EdgeInsets.only(top: 10.0),
          child: SizedBox(
            width: 400.0,
            height: 200.0,
            child: Card(
              color: Colors.blue,
              elevation: 30.0,
              child: Padding(
                padding: EdgeInsets.all(
                  14.0,
                ),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        CircleAvatar(
                          backgroundImage: NetworkImage(
                              "https://avatars3.githubusercontent.com/u/7410469?s=460&v=4"),
                          radius: 24.0,
                        ),
                        Container(
                          margin: EdgeInsets.only(left: 10.0),
                          child: Text(
                            "提莫",
                            style:
                                TextStyle(color: Colors.white, fontSize: 20.0),
                          ),
                        ),
                      ],
                    ),
                    Container(
                      margin: EdgeInsets.only(top: 30.0),
                      child: Text(
                        "Never Stop Thinking...",
                        style: TextStyle(color: Colors.white, fontSize: 30.0),
                      ),
                    ),
                    Container(
                      alignment: Alignment.bottomRight,
                      margin: EdgeInsets.only(top: 30.0),
                      child: Text(
                        "2019年1月11日15:47:35",
                        style: TextStyle(color: Colors.white, fontSize: 14.0),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

QQ截图20190111155819.png