前端入门flutter-10Flutter 页面布局 Flutter AspectRatio、Card卡片组件

  　　临近过年，也即将放假，公司事务多，私事也多。望明年如时雨天司----春来及时雨！

　　  依旧是页面布局章节，毕竟完美的布局才可以堵住UI、产品的嘴，赢得老板的心嘛，那么，开始咯！

　　　

import 'package:flutter/material.dart';
import 'package:flutter_app1/res/listData.dart';
void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AspectRatio、Car卡片组件'),
        ),
        body: Mybody4(),
      ),
    );
  }
}
/*
            AspectRatio的作用white根据设置 调整child的宽度比（相对于父元素）
            AspectRatio首页会在布局限制条件允许的范围内尽可能的扩展，Widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照比例企业尽量占满。
            如果在满足所有显示条件后无法找到一个可行的尺寸，AspectRation最终将会优先适应布局的限制条件，而忽略所设置的比率
 */
   class HomeContent extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
    // TODO: implement build
    return AspectRatio(
        //aspectRatio宽高比（要看外层是否允许按照这个比例布局，这只是一个参考值）
        aspectRatio: 2/1,
        child: Container(
          color: Colors.pink,
        ),
    );
  }
   }


   /*
   Card组件是卡片组件块，内容可以有大多是类型的Widget构成,Card具有圆角和阴影的效果，看起来更有立体感

常用属性

margin:外边距
child：子组件
shape：Card的阴影效果，默认效果为圆角的长方形。

   * */
   class Mybody extends StatelessWidget{
     List<Widget> _getItemVIew(){
       var map = listData.map((value) {
         return Card(
           child: Column(children: <Widget>[
             AspectRatio(
                 aspectRatio: 2/1,
               child: Image.network(value["imageUrl"],fit: BoxFit.fill),
             ),
             ListTile(
               title: Text(value["title"]),
               subtitle: Text(value["author"]),
             )
           ],),
         );
       });
       return map.toList();
     }
     @override
     Widget build(BuildContext context) {
    // TODO: implement build
      return ListView(
        children: _getItemVIew(),
      );
  }
   }
   class Mybody2 extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("张珊"),
                subtitle: Text("业界架构师"),
              ),
              ListTile(
                title: Text("电话：1657614357"),
              ),
              ListTile(
                title: Text("地址：广东省广州市天河区水能大厦 "),
              ),
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("李思"),
                subtitle: Text("T0智能工程师"),
              ),
              ListTile(
                title: Text("电话：1657614357"),
              ),
              ListTile(
                title: Text("地址：广东省广州市天河区水能大厦"),
              ),
            ],
          ),
        ),
      ],
    );
  }
   }
   class Mybody3 extends StatelessWidget{
     @override
     Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              AspectRatio(
                  aspectRatio: 20/9,
                child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2739171020,2681942617&fm=26&gp=0.jpg",fit: BoxFit.cover),
              ),
              ListTile(
                leading: ClipOval(
                  child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2739171020,2681942617&fm=26&gp=0.jpg",fit: BoxFit.cover,height: 60.0, 60.0),
                ),
                title: Text("fgdsugu"),
                subtitle: Text("dsgfsduyfufgefefuoygefyugfb"),
              )
            ],
          ),
        ),
        Card(
          margin: EdgeInsets.all(10.0),
          child: Column(
            children: <Widget>[
              AspectRatio(
                aspectRatio: 20/9,
                child: Image.network("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2739171020,2681942617&fm=26&gp=0.jpg",fit: BoxFit.cover),
              ),
              ListTile(
                leading: CircleAvatar(
                  backgroundImage: NetworkImage("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2739171020,2681942617&fm=26&gp=0.jpg"),
                ),
                title: Text("fgdsugu"),
                subtitle: Text("dsgfsduyfufgefefuoygefyugfb"),
              )
            ],
          ),
        ),
      ],
    );
  }
   }

//   动态渲染
class Mybody4 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children:listData.map((value){
       return Card(
         margin: EdgeInsets.all(10.0),
         child: Column(
           children: <Widget>[
             AspectRatio(
               aspectRatio: 20/9,
               child: Image.network(value["imageUrl"],fit: BoxFit.cover),
             ),
             ListTile(
               leading: CircleAvatar(
                 backgroundImage: NetworkImage(value["imageUrl"]),
               ),
               title: Text(value["title"]),
               subtitle: Text(value["author"],maxLines: 2,overflow: TextOverflow.ellipsis,),
             )
           ],
         ),
       );
      }).toList(),




    );
  }
}

　　                                    

　　　　　　　　　　　　图（body4）　　　　　　　　　　　　　　　　　　　　　　　　图(body3)　　　　　　　　　　　　　　　　　　　　　　　　　图(body2)