深海游弋的鱼 – 默默的点滴

1. AspectRatio 组件

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

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

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

常见属性：

1. aspectRatio 宽高比。页面最终也许不会按这个值去布局，具体则要看综合因素，这只是一个参考值；

2. child 子组件。值的类型为Widget；

代码示例：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// AspectRatio组件的用法
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return AspectRatio(
            // 高度与宽度的比值
            aspectRatio: 5.0/1.0 ,
            child:Container(
                color:Colors.red
            )
        );
    }
}

import 'package:flutter/material.dart';

void main(){

runApp(MyApp());

}

// 抽离成一个单独的组件

class MyApp extends StatelessWidget{

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

// 导航条

appBar:AppBar(title:Text('Flutter App')),

// 主体

body:HomeContent(),

// 主题

theme: ThemeData(primarySwatch:Colors.yellow),

);

}

// AspectRatio组件的用法

class HomeContent extends StatelessWidget{

@override

Widget build(BuildContext context) {

return AspectRatio(

// 高度与宽度的比值

aspectRatio: 5.0/1.0 ,

child:Container(

color:Colors.red

)

);

}

继续阅读Flutter中AspectRatio、Card 卡片组件

一	二	三	四	五	六	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31