AspectRatio

Author: DIVINER-only

docs/widget/regular/aspectratio/index.md

@@ -0,0 +1,19 @@
+## **AspectRatio**
+
+>
+将子控件调整为特定宽高比的控件
+* AspectRatio 首先会尝试布局约束的最大宽度，widget的高度是通过给定的宽度和宽高比率来决定的
+* 对于需要缩放调整位置的，一般是对图片的处理
+
+### 构造方法
+``` dart
+AspectRatio({
+  Key key,
+  @required this.aspectRatio,
+  Widget child
+})
+```
+
+### 属性介绍
+* aspectRatio: 宽高比，如1.5，宽度是高度的1.5倍
+* child: AspectRatio中的内容widget

lib/widget/regular/aspectratio/demo.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatefulWidget {
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  var aspectRatio = 1.5;
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('AspectRatio'),),
+      body: ListView(
+        children: <Widget>[
+          Container(
+            // margin: const EdgeInsets.only(top: 10.0),
+            width: double.infinity,
+            child: AspectRatio(
+              aspectRatio: aspectRatio,
+              child: Image.network(
+                'http://pic1.win4000.com/wallpaper/2019-01-31/5c52bf7fdc959_270_185.jpg',
+                fit: BoxFit.cover,
+              ),
+            )
+          ),
+          FlatButton(
+            child: Text('宽度沾满，aspectRatio: $aspectRatio', style: TextStyle(fontSize: 16.0),),
+            onPressed: (){
+              setState(() {
+                aspectRatio == 1.5 ? aspectRatio = 2.0 : aspectRatio = 1.5;
+              });
+            },
+          )
+        ],
+      )
+    );
+  }
+}

lib/widget/regular/aspectratio/index.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:efox_flutter/components/widgetComp.dart' as WidgetComp;
+import 'demo.dart' as Demo;
+
+class Index extends StatefulWidget {
+  static String title = 'AspectRatio';
+  static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/AspectRatio-class.html';
+  static String mdUrl = 'docs/widget/regular/aspectratio/index.md';
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  @override
+  Widget build(BuildContext context) {
+    return WidgetComp.Index(
+      title: Index.title,
+      originCodeUrl: Index.originCodeUrl,
+      mdUrl: Index.mdUrl,
+      demoChild: <Widget>[
+        Demo.Index()
+      ],
+    );
+  }
+}

lib/widget/regular/fittedbox/index.dart

@@ -4,7 +4,7 @@ import 'demo.dart' as Demo;
 
 class Index extends StatefulWidget {
   static String title = 'FittedBox';
-  static String originCodeUrl = '';
+  static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/FittedBox-class.html';
   static String mdUrl = 'docs/widget/regular/fittedbox/index.md';
   @override
   _IndexState createState() => _IndexState();

lib/widget/regular/index.dart

@@ -6,6 +6,7 @@ import 'padding/index.dart' as Padding;
 import 'align/index.dart' as Align;
 import 'center/index.dart' as Center;
 import 'fittedbox/index.dart' as FittedBox;
+import 'aspectratio/index.dart' as AspectRatio;
 
 const nameSpaces = '/regular_';
 
@@ -44,6 +45,11 @@ List widgets = [
     widget: FittedBox.Index(),
     code: 60231, // format_indent_decrease
     title: FittedBox.Index.title
+  ),
+  ItemInfo(
+    widget: AspectRatio.Index(),
+    code: 58688, // local_bar
+    title: AspectRatio.Index.title
   )
 ];
 

pubspec.yaml

@@ -63,6 +63,7 @@ flutter:
       - docs/widget/regular/align/
       - docs/widget/regular/center/
       - docs/widget/regular/fittedbox/
+      - docs/widget/regular/aspectratio/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.io/assets-and-images/#resolution-aware.