Flutter 卡片练习

// 卡片练习布局
import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

// 两张卡片组件 练习布局
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '卡片练习',
      home: Scaffold(
        appBar: AppBar(title: Text("卡片组件练习")),
        body: Container(
          padding: EdgeInsets.all(0),
          child: ListView(
            children: <Widget>[
              getCardView1(),
              getCardView2(),
              getCardView3(),
              getCardView4()
            ],
          ),
        ),
      ),
    );
  }

  Widget getCardView1() {
    return Card(
      // 根据设置裁剪内容
      clipBehavior: Clip.antiAlias,
      color: Colors.lightBlue,
      // 设置卡片的阴影
      elevation: 20.0,
      margin: EdgeInsets.all(20.0),
      semanticContainer: true,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
      child: Column(
        // 默认值 是子组件 自适应父组件
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          const ListTile(
            // 标题

            leading: Icon(
              Icons.account_balance_wallet,
              color: Colors.white,
            ),

            title: Text(
              "主题",
              style: TextStyle(color: Colors.white, fontSize: 40.0),
            ),
            subtitle: Text(
              "这里是副标题的内容这里是副标题的内容",
              style: TextStyle(color: Colors.white, fontSize: 16.0),
            ),
            contentPadding: EdgeInsets.only(
                left: 20.0, top: 10.0, bottom: 10.0, right: 20.0),
            // 点击按钮的内容
          ),
          ButtonBar(
            children: <Widget>[
              FlatButton(
                  onPressed: () {
                    print("点击了关于");
                  },
                  child: Text(
                    "关于",
                    style: TextStyle(color: Colors.white, fontSize: 14.0),
                  )),
              FlatButton(
                  onPressed: () {
                    print("点击了设置");
                  },
                  child: Text(
                    "设置",
                    style: TextStyle(color: Colors.white, fontSize: 14.0),
                  ))
            ],
          )
        ],
      ),
    );
  }

  Widget getCardView2() {
    return Container(
      width: 300,
      height: 100,
      margin: EdgeInsets.all(20),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(20.0), color: Colors.black38),
      child: ListTile(
        //  leading: Icon(Icons.account_balance_wallet,color: Colors.blueAccent,),

        leading: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Image.network(
                "https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=30238593be119313c743f8b65d036bea/c995d143ad4bd1131090fc6356afa40f4bfb0505.jpg",
                width: 50.0,
                height: 50.0,
                fit: BoxFit.cover,
              )
            ],
          ),
        ),
        title: Text(
          "我是中间标题",
          textAlign: TextAlign.left,
          style: TextStyle(
            color: Colors.white54,
            fontSize: 20.0,
          ),
        ),
        subtitle: Text(
          "我是二级副标题我是二级副标题",
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
        trailing: Icon(
          Icons.account_box,
          color: Colors.lightBlueAccent,
        ),
        onTap: () {
          print("点击了ListTile控件");
        },
      ),
    );
  }

  Widget getCardView3() {
    return Container(
      width: 300.0,
      margin: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
          color: Colors.deepOrangeAccent,
          borderRadius: BorderRadius.circular(20.0)),
      child: Column(
        children: <Widget>[
          Container(
            margin: EdgeInsets.fromLTRB(10, 5, 10, 5),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Align(
                  child: Text(
                    "左边",
                    style: TextStyle(fontSize: 25.0, color: Colors.deepPurple),
                  ),
                ),
                new Align(
                  child: Text("右边"),
                )
              ],
            ),
          ),
          getCardView2(),
        ],
      ),
    );
  }

  Widget getCardView4() {
    return Container(
      width: 100.0,
      height: 200.0,
      margin: EdgeInsets.all(20.0),
      decoration: BoxDecoration(
        color: Colors.deepPurpleAccent,
        borderRadius: BorderRadius.circular(20.0),
        // border: Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)))
      ),
      child: Column(
        // mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          // 第一个Container
          Container(
            height: 50,
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
            margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Align(
                  child: Text(
                    "左边",
                    style: TextStyle(color: Colors.white, fontSize: 20.0),
                  ),
                ),
                new Align(
                  child: Text(
                    "右边",
                    style: TextStyle(color: Colors.white, fontSize: 25.0),
                  ),
                )
              ],
            ),
          ),
          // 第二个Container
          Container(
            height: 100.0,
            margin: EdgeInsets.fromLTRB(10, 5, 10, 0),
            decoration: BoxDecoration(
                // 设置边框的角度
                border: Border(
                    bottom: BorderSide(width: 1, color: Color(0xffe5e5e5)))),
            child: ListTile(
              leading: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Card(
                      elevation: 2.0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0)
                      ),
                      child: Image.network(
                        "https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=30238593be119313c743f8b65d036bea/c995d143ad4bd1131090fc6356afa40f4bfb0505.jpg",
                        width: 50,
                        height: 40,
                        //fit: BoxFit.fill,
                      ),
                    )
                  ],
                ),
              ),
              title: Text(
                "我是主标题我是主标题",
                style: TextStyle(color: Colors.white30, fontSize: 20.0),
                overflow: TextOverflow.ellipsis,
                maxLines: 1,
              ),
              subtitle: Text(
                "我是二级标我是二级标题我是二级标题我是二级标题我是二级标题我是二级标题题",
                style: TextStyle(color: Colors.white30, fontSize: 15.0),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
              trailing: Icon(Icons.account_balance_wallet),
            ),
          ),
          Container(
            height: 40,
            margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                new Align(
                  child: Text(
                    "关于",
                    style: TextStyle(color: Colors.white30, fontSize: 15.0),
                  ),
                ),
                new Align(
                  child: Text(
                    "设置",
                    style: TextStyle(color: Colors.white30, fontSize: 15.0),
                  ),
                ),
                new Align(
                  child: Text(
                    "关闭",
                    style: TextStyle(color: Colors.white30, fontSize: 15.0),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}