Table

Author: DIVINER-only

docs/widget/regular/table/index.md

@@ -0,0 +1,35 @@
+## **Table**
+
+>
+该控件为其子控件进行table布局的Widget
+
+### 构造方法
+``` dart
+Table({
+  Key key,
+  this.children = const <TableRow>[],
+  this.columnWidths,
+  this.defaultColumnWidth = const FlexColumnWidth(1.0),
+  this.textDirection,
+  this.border,
+  this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
+  this.textBaseline,
+})
+```
+
+### 属性介绍
+>
+该Widget适用于多行多列，若只有一行或者一列，选择Row或Column会更合适一些
+
+* columnWidths：设置每一列的宽度
+* defaultColumnWidth：默认的每一列宽度值，默认情况下均分，通过FixedColumnWidth设置
+* textDirection：文字显示方向
+* border：表格边框
+* defaultVerticalAlignment：每一个cell的垂直方向的对齐方式, 包含5种：
+  * top：放置在的顶部；
+  * middle：垂直居中；
+  * bottom：放置在底部；
+  * baseline：文本baseline对齐；
+  * fill：充满整个cell。
+* textBaseline：defaultVerticalAlignment为baseline的时候，会用到这个属性。
+* children: Table的中的内容widget

docs/widget/regular/wrap/index.md

@@ -29,3 +29,4 @@ Wrap({
 * crossAxisAlignment：交叉轴（crossAxis）方向上的对齐方式,值: WrapCrossAlignment.start/center/end
 * textDirection：文本方向, 值：TextDirection.ltr/rtl
 * verticalDirection：定义了children摆放顺序，默认是down,值： VerticalDirection.down/up
+* children: Table的中的内容widget

lib/widget/regular/index.dart

@@ -9,6 +9,7 @@ import 'fittedbox/index.dart' as FittedBox;
 import 'aspectratio/index.dart' as AspectRatio;
 import 'constrainedbox/index.dart' as ConstrainedBox;
 import 'wrap/index.dart' as Wrap;
+import 'table/index.dart' as Table;
 
 const nameSpaces = '/regular_';
 
@@ -62,6 +63,11 @@ List widgets = [
     widget: Wrap.Index(),
     code: 59385, // pages 
     title: Wrap.Index.title
+  ),
+  ItemInfo(
+    widget: Table.Index(),
+    code: 59568, // receipt 
+    title: Table.Index.title
   )
 ];
 

lib/widget/regular/table/demo.dart

@@ -0,0 +1,66 @@
+import 'package:flutter/material.dart';
+
+class Index extends StatefulWidget {
+  @override
+  _IndexState createState() => _IndexState();
+}
+
+class _IndexState extends State<Index> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text('Table'),),
+      body: Center(
+        child: Container(
+          decoration: BoxDecoration(
+            image: DecorationImage(
+              image: NetworkImage('http://pic1.win4000.com/wallpaper/2019-01-31/5c52bf7fdc959_270_185.jpg'),
+              fit: BoxFit.cover
+            )
+          ),
+          child: Table(
+            columnWidths: const <int, TableColumnWidth> {
+              0: FixedColumnWidth(40.0),
+              1: FixedColumnWidth(80.0),
+              2: FixedColumnWidth(40.0),
+              // 3: FixedColumnWidth(80.0)
+            },
+            defaultColumnWidth: FixedColumnWidth(100.0),
+            textDirection: TextDirection.ltr,
+            border: TableBorder.all(
+              width: 1.0, style: BorderStyle.solid, color: Theme.of(context).primaryColor
+            ),
+            defaultVerticalAlignment: TableCellVerticalAlignment.top,
+            // textBaseline: TextBaseline.alphabetic,
+            children: List.generate(4, (index) {
+              return TableRow(
+                children: <Widget>[
+                  Container(
+                    height: 50.0,
+                    alignment: Alignment.center,
+                    child: Text('A${index+1}', style: TextStyle(fontSize: 20.0, color: Theme.of(context).primaryColor),),
+                  ),
+                  Container(
+                    height: 50.0,
+                    alignment: Alignment.center,
+                    child: Text('B${index+1}', style: TextStyle(fontSize: 20.0, color: Theme.of(context).primaryColor),),
+                  ),
+                  Container(
+                    height: 50.0,
+                    alignment: Alignment.center,
+                    child: Text('C${index+1}', style: TextStyle(fontSize: 20.0, color: Theme.of(context).primaryColor),),
+                  ),
+                  Container(
+                    height: 50.0,
+                    alignment: Alignment.center,
+                    child: Text('D${index+1}', style: TextStyle(fontSize: 20.0, color: Theme.of(context).primaryColor),),
+                  ),
+                ]
+              );
+            })
+          ),
+        ),
+      )
+    );
+  }
+}

lib/widget/regular/table/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 = 'Table';
+  static String originCodeUrl = '';
+  static String mdUrl = 'docs/widget/regular/table/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

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