Stack

Author: DIVINER-only

docs/widget/regular/flow/index.md

@@ -4,7 +4,7 @@
 实现优化流式布局以使用流布局的控件
 * 实现较为复杂，一般可通过Wrap来替换实现
 
-## 构造方法
+### 构造方法
 ``` dart
 Flow({
   Key key,

docs/widget/regular/stack/index.md

@@ -0,0 +1,31 @@
+## **Stack**
+
+>
+该Widget将子控件相对于其边框进行定位
+* Stack的布局行为，根据child是positioned节点还是non-positioned节点来区分
+  * 对于positioned的子节点，它们的位置会根据所设置的top、bottom、right以及left属性来确定，这几个值都是相对于Stack的左上角；
+  * 对于non-positioned的子节点，它们会根据Stack的aligment来设置位置。
+* 对应child的顺序，第一个child会被绘制在最低端
+
+### 构造方法
+``` dart
+Stack({
+  Key key,
+  this.alignment = AlignmentDirectional.topStart,
+  this.textDirection,
+  this.fit = StackFit.loose,
+  this.overflow = Overflow.clip,
+  List<Widget> children = const <Widget>[],
+})
+```
+
+### 属性介绍
+* alignment： 对齐方式,默认是topLeft
+* textDirection：文本方向，不常用
+* fit: 默认loose
+  * loose：子节点尺寸可以从min到max
+  * expand：子节点尽可能占用空间
+  * passthrough: 不改变子节点约束
+* overflow：超过部分是否裁切，Overflow.clip/visible
+* children: Stack中的内容Widget
+

lib/widget/regular/index.dart

@@ -11,6 +11,7 @@ import 'constrainedbox/index.dart' as ConstrainedBox;
 import 'wrap/index.dart' as Wrap;
 import 'table/index.dart' as Table;
 import 'flow/index.dart' as Flow;
+import 'stack/index.dart' as Stack;
 
 const nameSpaces = '/regular_';
 
@@ -74,6 +75,11 @@ List widgets = [
     widget: Flow.Index(),
     code: 58915, // sd_card 
     title: Flow.Index.title
+  ),
+  ItemInfo(
+    widget: Stack.Index(),
+    code: 57795, // settings_system_daydream
+    title: Stack.Index.title
   )
 ];
 

lib/widget/regular/stack/demo.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatefulWidget {
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  List alignment = [
+    Alignment.topLeft,
+    Alignment.topCenter,
+    Alignment.topRight,
+    Alignment.centerLeft,
+    Alignment.center,
+    Alignment.centerRight,
+    Alignment.bottomLeft,
+    Alignment.bottomCenter,
+    Alignment.bottomRight
+  ];
+  int alignmentIndex = 5;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('AppBar'),),
+      body: ListView(
+        children: <Widget>[
+          SizedBox(
+            child: Text('修改alignment的值,non-positined节点会改变位置'),
+          ),
+          Wrap(
+            alignment: WrapAlignment.spaceBetween,
+            children: List.generate(9, (index) {
+              return FlatButton(
+                child: Text('${alignment[index]}', style: TextStyle(fontSize: 11.0),),
+                onPressed: (){
+                  setState(() {
+                    alignmentIndex = index;
+                  });
+                },
+              );
+            }),
+          ),
+          StackDemo(alignmentValue: alignment[alignmentIndex],)
+        ],
+      ),
+    );
+  }
+}
+
+class StackDemo extends StatelessWidget {
+  var alignmentValue;
+  StackDemo({Key key, @required this.alignmentValue}):super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      textDirection: TextDirection.ltr,
+      fit: StackFit.loose,
+      overflow: Overflow.clip,
+      alignment: alignmentValue,
+      children: <Widget>[
+        AspectRatio(
+          aspectRatio: 16/9,
+          child: Image.network(
+            'http://pic1.win4000.com/wallpaper/2019-01-31/5c52bf7fdc959_270_185.jpg',
+            fit: BoxFit.cover
+          ),
+        ),
+        Positioned(
+          top: 32.0,
+          left: 32.0,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: <Widget>[
+              Text(
+                '欢聚时代',
+                style: TextStyle(
+                  fontSize: 20.0,
+                  color: Colors.red,
+                  fontWeight: FontWeight.bold
+                ),
+              ),
+              Text(
+                'Efox Team',
+                style: TextStyle(
+                  fontSize: 14.0,
+                  color: Colors.redAccent
+                ),
+              )
+            ],
+          ),
+        ),
+        SizedBox(
+          child: Icon(Icons.ac_unit, color: Theme.of(context).primaryColor, size: 32.0,),
+        )
+      ]
+    );
+  }
+}

lib/widget/regular/stack/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 = 'Stack';
+  static String originCodeUrl = 'https://docs.flutter.io/flutter/widgets/Stack-class.html';
+  static String mdUrl = 'docs/widget/regular/stack/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()
+      ],
+    );
+  }
+}

pubspec.yaml

@@ -69,6 +69,7 @@ flutter:
       - docs/widget/regular/wrap/
       - docs/widget/regular/table/
       - docs/widget/regular/flow/
+      - docs/widget/regular/stack/
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.io/assets-and-images/#resolution-aware.