本文共 6442 字，大约阅读时间需要 21 分钟。

// 卡片练习布局import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatefulWidget {
     @override  _MyAppState createState() => _MyAppState();}// 两张卡片组件 练习布局class _MyAppState extends State
   
     {
     @override  Widget build(BuildContext context) {
       return MaterialApp(      title: '卡片练习',      home: Scaffold(        appBar: AppBar(title: Text("卡片组件练习")),        body: Container(          padding: EdgeInsets.all(0),          child: ListView(            children: 
    
     [              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: 
     
      [          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: 
      
       [              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: 
       
        [              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: 
        
         [ Container( margin: EdgeInsets.fromLTRB(10, 5, 10, 5), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: 
         
          [ 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: 
          
           [ // 第一个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: 
           
            [ 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: 
            
             [ 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: 
             
              [ 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), ), ) ], ), ) ], ), ); }}
             
            
           
          
         
        
       
      
     
    
   

转载地址：https://blog.csdn.net/qq_22049619/article/details/104210986 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！