Flutter 组件 — FractionallySizedBox、AspectRatio

55750cb39e7f11bcb0198cd13055d13a.png

FractionallySizedBox介绍

当我们需要一个控件的尺寸是相对尺寸时，比如当前按钮的宽度占父组件的70%，可以使用 FractionallySizedBox来实现此效果。

FractionallySizedBox属性和说明

总共33个属性

字段	属性	描述
alignment	AlignmentGeometry	子组件的对齐方式键
widthFactor	double	宽度系数
heightFactor	double	高度系数
child	Widget	子组件

构造函数

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

属性详解

1.alignment

子组件的对齐方式

2、widthFactor

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

3、heightFactor

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

4、child

子组件

使用方法

import 'package:flutter/material.dart';

class AspectRatioExample extends StatefulWidget {
  @override
  _AspectRatioExampleState createState() => _AspectRatioExampleState();
}

class _AspectRatioExampleState extends State {
  @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,
          ),
        ),
      ),
    );
  }
}

AspectRatio 介绍

AspectRatio主要的作用是调整子组件设定的宽高比，如16:9或4:3等。

FractionallySizedBox属性和说明

总共33个属性

字段	属性	描述
aspectRatio	double	纵横比例
child	Widget	子组件

构造函数

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

属性详解

1.aspectRatio

aspectRatio主要用来设定子组件的纵横比例

2、child

child就是需要被设定纵横比例的子组件

使用方法

import 'package:flutter/material.dart';

class AspectRatioExample extends StatefulWidget {
  @override
  _AspectRatioExampleState createState() => _AspectRatioExampleState();
}

class _AspectRatioExampleState extends State {
  @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,
          ),
        ),
      ),
    );
  }
}