Flutter AspectRatio

AspectRatio的作用是根据设置调整子元素child的宽高比。

AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。

如果在满足所有限制条件过后无法找到一个可行的尺寸，AspectRatio最终将会去优先适应布局限制条件，而忽略所设置的比率。

属性	说明
aspectRatio	宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值
child	子组件

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 2/1, 
      child: Container(
        color: Colors.red,
      )
    );
  }
}

Flutter Card组件

Card是卡片组件块，内容可以由大多数类型的Widget构成，Card具有圆角和阴影，这让它看起来有立体感。

属性	说明
margin	外边距
child	子组件
elevation	阴影值的深度
color	背景颜色
shadowColor	阴影颜色
clipBehavior	clipBehavior 内容溢出的剪切方式 Clip.none不剪切 Clip.hardEdge裁剪但不应用抗锯齿 Clip.antiAlias裁剪而且抗锯齿 Clip.antiAliasWithSaveLayer带有抗锯齿的剪辑，并在剪辑之后立即保存saveLayer
Shape	Card的阴影效果，默认的阴影效果为圆角的长方形边。 shape: constRoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10))),

Card实现一个通讯录的卡片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          elevation: 15.0,
          // color: Colors.black12,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0),
          ),
          margin: const EdgeInsets.all(15.0),
          child: Column( 
          children: const [
            ListTile(
              title: Text('张三'),
              subtitle: Text('高级工程师'),
            ),
            Divider(),
            ListTile(
              title: Text('电话：15657938519'),
            ),
            ListTile(
              title: Text('地址：北京市朝阳区'),
            ),
          ]),
        ),
        Card(
          child: Column( 
          children: const [
            ListTile(
              title: Text('李四'),
              subtitle: Text('Flutter高级工程师'),
            ),
            Divider(color: Colors.black,),
            ListTile(
              title: Text('电话：15657938519'),
            ),
            ListTile(
              title: Text('地址：北京市朝阳区'),
            ),
          ]),
        )
      ],
    );
  }
}

Card实现一个图文列表卡片

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Card(
          margin: const EdgeInsets.all(10.0),
          elevation: 20,
          // 超出部分的裁剪方式  
          clipBehavior: Clip.antiAlias,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(
                  'https://www.itying.com/images/flutter/1.png',
                  fit: BoxFit.cover,
                ),
              ),
              const ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://www.itying.com/images/flutter/1.png'),
                  ),
                  title: Text('xxxx'),
                  subtitle: Text('xxxx'),
                ),
            ],
          ),
        ),
        Card(
          margin: const EdgeInsets.all(10.0),
          elevation: 20,
          // 超出部分的裁剪方式  
          clipBehavior: Clip.antiAlias,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(
                  'https://www.itying.com/images/flutter/2.png',
                  fit: BoxFit.cover,
                ),
              ),
              const ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://www.itying.com/images/flutter/2.png'),
                  ),
                  title: Text('xxxx'),
                  subtitle: Text('xxxx'),
                ),
            ],
          ),
        ),
        Card(
          margin: const EdgeInsets.all(10.0),
          elevation: 20,
          // 超出部分的裁剪方式  
          clipBehavior: Clip.antiAlias,
          shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
          ),
          child: Column(
            children: [
              AspectRatio(
                aspectRatio: 20 / 9,
                child: Image.network(
                  'https://www.itying.com/images/flutter/3.png',
                  fit: BoxFit.cover,
                ),
              ),
              const ListTile(
                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                        'https://www.itying.com/images/flutter/3.png'),
                  ),
                  title: Text('xxxx'),
                  subtitle: Text('xxxx'),
                ),
            ],
          ),
        ),
      ],
    );
  }
}

CircleAvatar实现一个圆形图片

radius 元的半径

const CircleAvatar(
    radius: 200,
    backgroundImage:
    NetworkImage("https://www.itying.com/images/flutter/3.png"),
)

基本上，CircleAvatar 不提供设置边框的属性。但是，可以将其包裹在具有更大半径和不同背景颜色的不同 CircleAvatar 中，以创建类似于边框的内容。

return const CircleAvatar(
    radius: 110,
    backgroundColor: Color(0xffFDCF09),
    child: CircleAvatar(
        radius: 100,
        backgroundImage:
        NetworkImage("https://www.itying.com/images/flutter/3.png"),
    )
)

Card循环遍历生成图文列表

import 'package:flutter/material.dart';
import 'listData.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好Flutter'),
        backgroundColor: Colors.blueGrey[900],
      ),
      body: const MyApp(),
    ),
  ));
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  List<Widget> _initCard() {
    var tempList = listData.map((e) {
      return Card(
        margin: const EdgeInsets.all(10.0),
        elevation: 20,
        // 超出部分的裁剪方式  
        clipBehavior: Clip.antiAlias,
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
        ),
        child: Column(
          children: [
            AspectRatio(
              aspectRatio: 20 / 9,
              child: Image.network(e['imageUrl'],fit: BoxFit.cover,),
            ),
            ListTile(
              leading: CircleAvatar(backgroundImage: NetworkImage(e['imageUrl'])),
              title: Text(e['title']),
              subtitle: Text(e['author']),
            ),
          ],
        ),
      );
    });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // print(listData);
    return ListView(
      children: _initCard(),
    );
  }
}

十一丶Fluuter_AspectRatio_Card_CircleAvatar组件