Flutter--AspectRatio、Card、CircleAvatar、Wrap1.AspectRatio Asp

1.AspectRatio

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

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

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

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

2）child:子组件

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,
      ),
    );
  }
}

2.Card组件

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

1）margin:外边距

2）child:子组件

3）elevation:阴影值的深度

color:背景颜色
shadowColor:阴影颜色

6）clipBehavior:内容溢出的剪切方式。Clip.none不剪切；Clip.hardEdge剪裁但不应用抗锯齿；Clip.antiAlias剪裁而且抗锯齿；

Clip.antiAliasWithSaveLayer：带有抗锯齿的裁剪，并在裁剪之后立即保存saveLayer。

7）Shape:Card的阴影效果，默认的阴影效果为圆角的长方形边。shape:const RoundedRectangleBorder(borderRadius:BorderRadius.circular(10))

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 300,
      height: 150,
      child: Card(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
        elevation: 10,
        color: Colors.white,
        margin: const EdgeInsets.all(20),
        child: Column(
          children: const [
            SizedBox(height: 10,),
            Text('哈哈哈哈哈'),
            SizedBox(height: 10,),
            Text('heiheiheihei'),
            SizedBox(height: 10,),
            Text('啊啊啊啊啊啊'),
            SizedBox(height: 10,),
          ],
        ),
      ),
    );
  }
}

3.使用CircleAvatar实现圆角效果

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

  @override
  Widget build(BuildContext context) {
    return const CircleAvatar(
      radius: 100,
      backgroundImage: NetworkImage('https://www.itying.com/images/flutter/1.png'),
    );
  }
}

4.Wrap布局

wrap可以实现流布局，单行的wrap和Row表现几乎一致，单列的Wrap则跟Column表现几乎一致。但Row和Column都是单行单列的，Wrap则突破了这个限制,mainAxis上空间不足时，则向crollAxis上去扩展显示。

direction:主轴的方向，默认水平

alignment:主轴的对其方式

spacing:主轴方向上的间距

textDirection:文本方向

verticalDirection:定义了children摆放顺序，默认是down,见Flex相关属性介绍。

runAlignment:run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行。

runSpacing:run的间距

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('你好，Flutter'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(10),
        child: Wrap(
          spacing: 10, //水平间距
          runSpacing: 10, //垂直间距
         // direction: Axis.vertical,
          alignment: WrapAlignment.center,
          children: [
            MyApp('第一个', onPressed:(){}),
            MyApp('第二个', onPressed:(){}),
            MyApp('第三个', onPressed:(){}),
            MyApp('第四个', onPressed:(){}),
            MyApp('第五个', onPressed:(){}),
            MyApp('第六个', onPressed:(){}),
          ],
        ),
      ),
    ),
  ));
}

class MyApp extends StatelessWidget {
  final String text;
  final void Function()? onPressed;

  const MyApp(this.text, {Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onPressed, child: Text(text));
  }
}