【Flutter】十六、AspectRatio、Card控件

一、AspectRatio

设置child的宽高比。AspectRatio会在布局限制条件内尽可能的扩展。

1.1 AspectRatio属性说明

const AspectRatio({
    Key key,
    @required this.aspectRatio, // 宽高比
    Widget child,
  }) : assert(aspectRatio != null),
       super(key: key, child: child);

示例

	Container(
      width: 300,
      child: AspectRatio(
        aspectRatio: 3.0/2.0,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    );

    以上代码中，会显示一个黄色的宽高比为3/2的矩形，矩形宽度为200，高度为200。

---

二、Card

卡片控件，自带圆角阴影，可放置各种widget。

2.1 Card属性说明

const Card({
    Key key,
    this.color, // 背景色
    this.elevation, // 阴影范围
    this.shape, // 圆角及边框设置
    this.borderOnForeground = true, // 是否在child前面绘制边框。
    this.margin, // 外边距
    this.clipBehavior,
    this.child,
    this.semanticContainer = true,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(borderOnForeground != null),
       super(key: key);

使用示例

import 'package:flutter/material.dart';

class CardDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 60.0,
      child: Card(
        elevation: 10.0,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(5.0),
        ),
        borderOnForeground: true,
        clipBehavior: Clip.none,
        semanticContainer: false,
        margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 10.0),
          child: Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('标题一'),
                    SizedBox(height: 3.0),
                    Text('副标题', style: TextStyle(fontSize: 10),)
                  ],
                ),
              ),
              Container(
                child: Icon(Icons.keyboard_arrow_right, size: 19,),
              )
            ],
          ),
        ),
      )
    );
  }
}

效果展示