关于flutter:Flutter深入浅出组件篇AspectRatioFractionallySizedBox

AspectRatio介绍

AspectRatio 次要的作用是调整子组件设定的宽高比，如播放视频时16:9或4:3等。

示例代码

本文中很多成果都没有截图，可下载源代码运行我的项目 源代码地址，或者通过视频教程查看 视频教程地址

AspectRatio构造函数

const AspectRatio({  Key? key,  required this.aspectRatio,  Widget? child,}) : assert(aspectRatio != null),     assert(aspectRatio > 0.0),     // can't test isFinite because that's not a constant expression     super(key: key, child: child);

AspectRatio属性和阐明

aspectRatio、child

aspectRatio 次要用来设定子组件的纵横比例，而child就是须要被设定纵横比例的子组件。

AspectRatio根本应用

import 'package:flutter/material.dart';class AspectRatioExample extends StatefulWidget {  @override  _AspectRatioExampleState createState() => _AspectRatioExampleState();}class _AspectRatioExampleState extends State<AspectRatioExample> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("AspectRatioExample"),      ),      body: Container(        color: Colors.blue,        alignment: Alignment.center,        width: double.infinity,        height: 100.0,        child: AspectRatio(          aspectRatio: 16 / 9,          child: Container(            color: Colors.orangeAccent,          ),        ),      ),    );  }}

AspectRatio成果展现

咱们看到橙色盒子的宽度是他父组件的高度*16/9

FractionallySizedBox介绍

当咱们须要一个控件的尺寸是绝对尺寸时，比方以后按钮的宽度占父组件的70%，能够应用FractionallySizedBox来实现此成果。

FractionallySizedBox构造函数

const FractionallySizedBox({    Key? key,    this.alignment = Alignment.center,    this.widthFactor,    this.heightFactor,    Widget? child,}) : assert(alignment != null),     assert(widthFactor == null || widthFactor >= 0.0),     assert(heightFactor == null || heightFactor >= 0.0),     super(key: key, child: child);

FractionallySizedBox属性和阐明

1、alignment

对于alignment 这个字段在后面的文章中咱们具体讲过，在Flutter深入浅出组件篇---Align、AnimatedAlign 能够看到更具体的介绍

2、widthFactor

子组件绝对于父组件的宽度系数

3、heightFactor

子组件绝对于父组件的高度系数

4、child

子组件

FractionallySizedBox根本应用

import 'package:flutter/material.dart';class AspectRatioExample extends StatefulWidget {  @override  _AspectRatioExampleState createState() => _AspectRatioExampleState();}class _AspectRatioExampleState extends State<AspectRatioExample> {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text("AspectRatioExample"),      ),      body: Container(        color: Colors.blue,        alignment: Alignment.center,        width: 150,        height: 150.0,        child: FractionallySizedBox(          alignment: Alignment.topLeft,          widthFactor: 1.5,          heightFactor: 0.5,          child: new Container(            color: Colors.red,          ),        ),      ),    );  }}

FractionallySizedBox成果展现

咱们看到子组件红色盒子是父组件蓝色盒子的1.5倍，所以超出