mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-05-21 06:46:23 +08:00
Merge branch 'develop' into dev/yisheng
This commit is contained in:
@ -1,4 +1,4 @@
|
||||
## Flutter 菜鸟手册
|
||||
## Flutter Go
|
||||
|
||||
> 帮助开发者快速上手 Flutter **内部测试中,1.0 正式版将于 2月 20日 发布。**
|
||||
|
||||
@ -25,13 +25,13 @@ flutter优点主要包括:
|
||||
- 灵活的界面设计以及控件组合
|
||||
- 借助可以移植的GPU加速的渲染引擎以及高性能ARM代码运行时已达到高质量的用户体验
|
||||
|
||||
#### 菜鸟手册的由来
|
||||
#### Flutter Go 的由来
|
||||
|
||||
- Flutter学习资料太少,对于英文不好的同学相对来说比较困难
|
||||
- 官网文档示例不够健全,不够直观
|
||||
- 各个 widget 的用法各异,属性纷繁,要运行一个 widget 的 demo 往往要到处翻阅各种资料
|
||||
|
||||
#### 菜鸟手册的优势
|
||||
#### Flutter Go 的优势
|
||||
|
||||
- 详解常用widget多达 **130+** 个
|
||||
- 配套 Demo 详解 widget 常规用法
|
||||
|
@ -14,7 +14,7 @@
|
||||
FlutterApplication and put your custom class here. -->
|
||||
<application
|
||||
android:name="io.flutter.app.FlutterApplication"
|
||||
android:label="flutter_rookie_book"
|
||||
android:label="flutter_go"
|
||||
android:icon="@mipmap/ic_launcher">
|
||||
<activity
|
||||
android:name=".MainActivity"
|
||||
|
BIN
assets/app.db
BIN
assets/app.db
Binary file not shown.
@ -13,7 +13,7 @@
|
||||
<key>CFBundleInfoDictionaryVersion</key>
|
||||
<string>6.0</string>
|
||||
<key>CFBundleName</key>
|
||||
<string>flutter_rookie_book</string>
|
||||
<string>flutter_go</string>
|
||||
<key>CFBundlePackageType</key>
|
||||
<string>APPL</string>
|
||||
<key>CFBundleShortVersionString</key>
|
||||
|
@ -4,37 +4,81 @@ import 'dart:typed_data';
|
||||
import 'package:path/path.dart';
|
||||
import 'package:sqflite/sqflite.dart';
|
||||
import 'package:flutter/services.dart' show rootBundle;
|
||||
//const createSql = {
|
||||
// 'cat': """
|
||||
// CREATE TABLE "cat" (
|
||||
// `id` INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE,
|
||||
// `name` TEXT NOT NULL UNIQUE,
|
||||
// `depth` INTEGER NOT NULL DEFAULT 1,
|
||||
// `parentId` INTEGER NOT NULL,
|
||||
// `desc` TEXT
|
||||
// );
|
||||
// """,
|
||||
// 'collectio': """
|
||||
// CREATE TABLE collection (id INTEGER PRIMARY KEY NOT NULL UNIQUE, name TEXT NOT NULL, router TEXT);
|
||||
// """,
|
||||
// 'widget': """
|
||||
// CREATE TABLE widget (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT UNIQUE, name TEXT NOT NULL, cnName TEXT NOT NULL, image TEXT NOT NULL, doc TEXT, demo TEXT, catId INTEGER NOT NULL REFERENCES cat (id), owner TEXT);
|
||||
// """;
|
||||
//};
|
||||
|
||||
class Provider {
|
||||
static Database db;
|
||||
|
||||
// 获取数据库中所有的表
|
||||
Future<List> getTables() async {
|
||||
if (db == null) {
|
||||
return Future.value([]);
|
||||
}
|
||||
List tables = await db.rawQuery('SELECT name FROM sqlite_master WHERE type = "table"');
|
||||
List<String> targetList = [];
|
||||
tables.forEach((item) {
|
||||
targetList.add(item['name']);
|
||||
});
|
||||
return targetList;
|
||||
}
|
||||
|
||||
// 检查数据库中, 表是否完整, 在部份android中, 会出现表丢失的情况
|
||||
Future checkTableIsRight() async {
|
||||
List<String> expectTables = ['cat', 'widget', 'collection'];
|
||||
|
||||
List<String> tables = await getTables();
|
||||
|
||||
for(int i = 0; i < expectTables.length; i++) {
|
||||
if (!tables.contains(expectTables[i])) {
|
||||
print("table lost in app");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
|
||||
}
|
||||
|
||||
//初始化数据库
|
||||
// isCreate 用永远 copy 一个新的数据库
|
||||
|
||||
Future init(bool isCreate) async {
|
||||
//Get a location using getDatabasesPath
|
||||
String databasesPath = await getDatabasesPath();
|
||||
String path = join(databasesPath, 'flutter.db');
|
||||
List<Map> tables;
|
||||
|
||||
try {
|
||||
db = await openDatabase(path);
|
||||
tables = await db
|
||||
.rawQuery('SELECT name FROM sqlite_master WHERE type = "table"');
|
||||
print('${tables.length} 7891');
|
||||
} catch (e) {
|
||||
print("Error $e");
|
||||
}
|
||||
bool tableIsRight = await this.checkTableIsRight();
|
||||
|
||||
if (tables.length < 3) {
|
||||
// Delete the database
|
||||
await deleteDatabase(path);
|
||||
if (!tableIsRight) {
|
||||
// 关闭上面打开的db,否则无法执行open
|
||||
db.close();
|
||||
// Delete the database
|
||||
await deleteDatabase(path);
|
||||
ByteData data = await rootBundle.load(join("assets", "app.db"));
|
||||
List<int> bytes =
|
||||
data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
|
||||
await new File(path).writeAsBytes(bytes);
|
||||
|
||||
db = await openDatabase(path, version: 2,
|
||||
db = await openDatabase(path, version: 1,
|
||||
onCreate: (Database db, int version) async {
|
||||
print('db created version is $version');
|
||||
}, onOpen: (Database db) async {
|
||||
@ -44,4 +88,5 @@ class Provider {
|
||||
print("Opening existing database");
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -1,7 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/views/detail.dart';
|
||||
|
||||
|
||||
import 'package:flutter_go/views/Detail.dart';
|
||||
|
||||
class CompList extends StatefulWidget {
|
||||
@override
|
||||
|
@ -11,10 +11,7 @@ import 'routers/application.dart';
|
||||
import 'common/provider.dart';
|
||||
import 'model/widget.dart';
|
||||
import './widgets/index.dart';
|
||||
import 'package:flutter_rookie_book/components/search_input.dart';
|
||||
|
||||
|
||||
|
||||
import 'package:flutter_go/components/search_input.dart';
|
||||
const int ThemeColor = 0xFFC91B3A;
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
|
@ -1,11 +1,13 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/common/list_view_item.dart';
|
||||
import 'package:flutter_rookie_book/components/list_refresh.dart' as listComp;
|
||||
import 'package:flutter_rookie_book/components/pagination.dart';
|
||||
import 'package:flutter_rookie_book/components/first_page_item.dart';
|
||||
import 'package:flutter_rookie_book/components/disclaimer_msg.dart';
|
||||
|
||||
import 'package:flutter_go/common/list_view_item.dart';
|
||||
import 'package:flutter_go/components/list_refresh.dart' as listComp;
|
||||
import 'package:flutter_go/components/pagination.dart';
|
||||
import 'package:flutter_go/components/first_page_item.dart';
|
||||
import 'package:flutter_go/components/disclaimer_msg.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
import '../common/net_utils.dart';
|
||||
|
||||
GlobalKey<DisclaimerMsgState> key;
|
||||
|
@ -5,7 +5,7 @@
|
||||
* @Last Modified time: 2019-01-11 14:40:09
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/components/cate_card.dart';
|
||||
import 'package:flutter_go/components/cate_card.dart';
|
||||
import '../model/cat.dart';
|
||||
|
||||
class WidgetPage extends StatefulWidget {
|
||||
|
@ -16,7 +16,7 @@ import './demo.dart' as AppBarDemo;
|
||||
const String _Text0 =
|
||||
"""### **简介**
|
||||
> AppBar “应用栏”
|
||||
- 应用栏由工具栏和可能的其他 widget 组成,例如 TabBar和FlexibleSpaceBar;
|
||||
- 应用栏由工具栏组成,或者是工具栏和其他 widget 组合形成,例如 TabBar和FlexibleSpaceBar;
|
||||
- 应用栏通常用于 Scaffold.appBar 属性,该属性将应用栏放置在屏幕顶部的固定高度小部件中;
|
||||
- 对于可滚动的应用栏,请参阅SliverAppBar,它将AppBar嵌入 sliver 中以便在CustomScrollView中使用;
|
||||
""";
|
||||
|
@ -16,7 +16,7 @@ import './demo.dart' as CardDemo;
|
||||
const String _Text0 =
|
||||
"""### **简介**
|
||||
> Card “卡片”
|
||||
- 卡片是用于表示一些相关信息的一张材料,例如相册,地理位置,用餐,联系方式等
|
||||
- 卡片用于表示一些相关信息,例如相册,地理位置,用餐,联系方式等
|
||||
""";
|
||||
|
||||
|
||||
|
@ -17,7 +17,7 @@ const String content0 = '''
|
||||
const String content1 = '''
|
||||
### **基本用法**
|
||||
- 创建ChipThemeData最简单的方法是使用copyWith您从得到一个ChipTheme.of,
|
||||
或创建一个全新的一个具有 ChipThemeData..fromDefaults。。
|
||||
或创建一个全新的一个具有 ChipThemeData..fromDefaults
|
||||
''';
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
|
@ -13,12 +13,13 @@ import 'demo.dart';
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> AboutDialog 通常用于传递企业或者app的官方信息
|
||||
|
||||
- 这个对话框包含应用程序的图标,名称,版本号,版权和应用程序使用到的软件许可证的按钮
|
||||
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 通常作为子窗口小部件传递给showDialog,后者显示对话框。
|
||||
> 要显示的AboutDialog,使用showAboutDialog。
|
||||
- 如果应用程序具有Drawer,则AboutListTile可以使显示AboutDialog的过程更简单。
|
||||
- AboutDialog通过showAboutDialog 显示按钮调用 showLicensePage。
|
||||
|
||||
""";
|
||||
|
||||
|
@ -12,18 +12,14 @@ import 'demo.dart';
|
||||
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> AlertDialog 向用户传递信息的弹出层。
|
||||
|
||||
|
||||
> AlertDialog 向用户传递信息的弹出层。警报对话框
|
||||
- 一般使用在通知用户需要确认的情况,具有可选标题和可选的操纵列表。标题显示在上方,操纵内容显示在内容区域,即下方
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 通常作为子窗口小部件传递给showDialog,后者显示对话框。
|
||||
|
||||
当**AlertDialog**的的元素过多过长时, 请优先考虑**SingleChildScrollView** 用来避免内容溢出
|
||||
|
||||
|
||||
|
||||
- 当**AlertDialog**的的元素过多过长时, 请优先考虑**SingleChildScrollView** 用来避免内容溢出
|
||||
- 需要注意的是,由于AlertDialog 通常使用child的大小来调整自身大小,所以使用一些widget(如ListView,GridView和CustomScrollView)将无法正常工作
|
||||
- 当需要给用户提供多个选项的供选择时,请使用SimpleDialog
|
||||
""";
|
||||
|
||||
|
||||
|
@ -22,7 +22,21 @@ class _Demo extends State<DialogDemo> {
|
||||
barrierDismissible: false, // user must tap button!
|
||||
builder: (BuildContext context) {
|
||||
return Dialog(
|
||||
child: Text("我是一个Dialog"),
|
||||
child: Container(
|
||||
height: 100,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: <Widget>[
|
||||
Text('我是一个dialog'),
|
||||
RaisedButton(
|
||||
child: Text('取消'),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
)
|
||||
],
|
||||
),
|
||||
)
|
||||
);
|
||||
},
|
||||
);
|
||||
@ -63,15 +77,30 @@ class _DialogMoreDemo extends State<DialogMoreDemo> {
|
||||
return StatefulBuilder(
|
||||
builder: (context, state) {
|
||||
return Dialog(
|
||||
child: RaisedButton(
|
||||
child: Container(
|
||||
height: 150,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||
children: <Widget>[
|
||||
Text('我是一个dialog'),
|
||||
RaisedButton(
|
||||
onPressed: () {
|
||||
print("print $value");
|
||||
state(() {
|
||||
value += 1;
|
||||
});
|
||||
},
|
||||
child: Text("我是一个Dialog, 点我更新value: $value"),
|
||||
),
|
||||
RaisedButton(
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
child: Text("取消"),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
);
|
||||
}
|
||||
);
|
||||
|
@ -12,17 +12,14 @@ import 'demo.dart';
|
||||
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> AlertDialog 向用户传递信息的弹出层。
|
||||
|
||||
这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 **AlertDialog**或者**SimpleDialog**
|
||||
> Dialog 向用户传递信息的弹出层。
|
||||
-这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 **AlertDialog**或者**SimpleDialog**
|
||||
|
||||
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 通常作为子窗口小部件传递给showDialog,后者显示对话框。
|
||||
|
||||
|
||||
""";
|
||||
|
||||
const String _Text1 = """
|
||||
|
@ -13,12 +13,15 @@ import 'demo.dart';
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> SimpleDialog 是一个用于向用户传递确定信息并提供选项的弹出层
|
||||
- SimpleDialog 可为用户提供多个选项选择。有一个可选的标题,显示在选项上方
|
||||
|
||||
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 通常作为子窗口小部件传递给showDialog,后者显示对话框。
|
||||
- 选择通常使用SimpleDialogOption表示
|
||||
- 对于通知用户情况的对话框,请考虑使用 AlertDialog。
|
||||
|
||||
""";
|
||||
|
||||
|
62
lib/widgets/components/Grid/GridPaper/demo.dart
Normal file
62
lib/widgets/components/Grid/GridPaper/demo.dart
Normal file
@ -0,0 +1,62 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: 三帆
|
||||
* Date: 07/01/2019
|
||||
* Time: 10:31
|
||||
* email: sanfan.hx@alibaba-inc.com
|
||||
* tartget: xxx
|
||||
*/
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
||||
class GridPaperDemo extends StatefulWidget {
|
||||
_Demo createState() => _Demo();
|
||||
}
|
||||
|
||||
class _Demo extends State<GridPaperDemo> {
|
||||
|
||||
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 400,
|
||||
color: Color(0xffc91b3a),
|
||||
child: new GridView.count(
|
||||
crossAxisCount: 2,
|
||||
mainAxisSpacing: 10.0,
|
||||
crossAxisSpacing: 4.0,
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
childAspectRatio: 1.3,
|
||||
children: <Widget>[
|
||||
GridTile(
|
||||
header: GridTileBar(
|
||||
title: Text('title'),
|
||||
subtitle: Text('subtitle'),
|
||||
leading: Icon(Icons.add),
|
||||
trailing: Text("trailing"),
|
||||
),
|
||||
child: Container(),
|
||||
|
||||
),
|
||||
GridPaper(
|
||||
color: Colors.red,
|
||||
child: new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
new Image.network('https://flutter.io/assets/homepage/news-2-599aefd56e8aa903ded69500ef4102cdd8f988dab8d9e4d570de18bdb702ffd4.png', scale: 1, fit: BoxFit.cover),
|
||||
],
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
44
lib/widgets/components/Grid/GridPaper/index.dart
Normal file
44
lib/widgets/components/Grid/GridPaper/index.dart
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: 三帆
|
||||
* Date: 07/01/2019
|
||||
* Time: 10:26
|
||||
* email: sanfan.hx@alibaba-inc.com
|
||||
* tartget: xxx
|
||||
*/
|
||||
import '../../../../common/widget_demo.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'demo.dart';
|
||||
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> GridViewPaper是GridView中的item的一种展现形式, 会在上层浮现一层网络.
|
||||
|
||||
""";
|
||||
|
||||
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/components/Grid/GridPaper';
|
||||
|
||||
@override
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'GridPaper',
|
||||
codeUrl: 'components/Grid/GridPaper/demo.dart',
|
||||
contentList: [
|
||||
_Text0,
|
||||
GridPaperDemo(),
|
||||
SizedBox(
|
||||
height: 100.0,
|
||||
)
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/GridPaper-class.html',
|
||||
);
|
||||
}
|
||||
}
|
@ -12,12 +12,41 @@ import 'demo.dart';
|
||||
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> GridView 通常用来做GridTile的header与footer组件;
|
||||
> GridView在移动端上非常的常见的滚动列表, 会占满给出的空间区域.
|
||||
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 1231
|
||||
> 创建一个列表
|
||||
|
||||
属性介绍
|
||||
|
||||
- scrollDirection:滚动的方向,有垂直和水平两种,默认为垂直方向(Axis.vertical)。
|
||||
|
||||
- reverse:默认是从上或者左向下或者右滚动的,这个属性控制是否反向,默认值为false,不反向滚动。
|
||||
|
||||
- controller:控制child滚动时候的位置。
|
||||
|
||||
- primary:是否是与父节点的PrimaryScrollController所关联的主滚动视图。
|
||||
|
||||
- physics:滚动的视图如何响应用户的输入。
|
||||
|
||||
- shrinkWrap:滚动方向的滚动视图内容是否应该由正在查看的内容所决定。
|
||||
|
||||
- padding:四周的空白区域。
|
||||
|
||||
- gridDelegate:控制GridView中子节点布局的delegate。
|
||||
|
||||
- cacheExtent:缓存区域。
|
||||
|
||||
### **进阶用法**
|
||||
|
||||
> GridView 提供其他四种构造方法
|
||||
|
||||
- GridView.builder
|
||||
- GridView.custom
|
||||
- GridView.count
|
||||
- GridView.extent
|
||||
""";
|
||||
|
||||
|
||||
@ -33,11 +62,14 @@ class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'GridTileBar',
|
||||
title: 'GridView',
|
||||
codeUrl: 'components/Grid/GridView/demo.dart',
|
||||
contentList: [
|
||||
_Text0,
|
||||
GridTileDemo(),
|
||||
SizedBox(
|
||||
height: 100.0,
|
||||
)
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/GridView-class.html',
|
||||
);
|
||||
|
63
lib/widgets/components/Grid/SliverGrid/demo.dart
Normal file
63
lib/widgets/components/Grid/SliverGrid/demo.dart
Normal file
@ -0,0 +1,63 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: 三帆
|
||||
* Date: 07/01/2019
|
||||
* Time: 10:31
|
||||
* email: sanfan.hx@alibaba-inc.com
|
||||
* tartget: xxx
|
||||
*/
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
|
||||
class SliverGridDemo extends StatefulWidget {
|
||||
_Demo createState() => _Demo();
|
||||
}
|
||||
|
||||
class _Demo extends State<SliverGridDemo> {
|
||||
|
||||
Widget showCustomScrollView() {
|
||||
return new CustomScrollView(
|
||||
slivers: <Widget>[
|
||||
new SliverGrid(
|
||||
gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
|
||||
maxCrossAxisExtent: 200.0,
|
||||
mainAxisSpacing: 10.0,
|
||||
crossAxisSpacing: 10.0,
|
||||
childAspectRatio: 4.0,
|
||||
),
|
||||
delegate: new SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
return new Container(
|
||||
alignment: Alignment.center,
|
||||
color: Colors.cyan[100 * (index % 5)],
|
||||
child: new Text('grid item $index'),
|
||||
);
|
||||
},
|
||||
childCount: 20,
|
||||
),
|
||||
),
|
||||
// new SliverFixedExtentList(
|
||||
// itemExtent: 100.0,
|
||||
// delegate: new SliverChildBuilderDelegate(
|
||||
// (BuildContext context, int index) {
|
||||
// return new Container(
|
||||
// alignment: Alignment.center,
|
||||
// color: Colors.lightBlue[100 * (index % 9)],
|
||||
// child: new Text('list item $index'),
|
||||
// );
|
||||
// },
|
||||
// ),
|
||||
// ),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 400,
|
||||
color: Color(0xffc91b3a),
|
||||
child: showCustomScrollView()
|
||||
);
|
||||
}
|
||||
}
|
54
lib/widgets/components/Grid/SliverGrid/index.dart
Normal file
54
lib/widgets/components/Grid/SliverGrid/index.dart
Normal file
@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Created with Android Studio.
|
||||
* User: 三帆
|
||||
* Date: 07/01/2019
|
||||
* Time: 10:26
|
||||
* email: sanfan.hx@alibaba-inc.com
|
||||
* tartget: xxx
|
||||
*/
|
||||
import '../../../../common/widget_demo.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'demo.dart';
|
||||
|
||||
const String _Text0 = """
|
||||
### **简介**
|
||||
> SliverGrid 将多个item以每行二个的形式, 进行排列.
|
||||
|
||||
### **基本用法**
|
||||
|
||||
> 创建
|
||||
|
||||
在排列列表时,将基于现有的小部件, 延迟创建可见子项的元素、状态和呈现对象。 也就是只有视口中的元素, 才会被创建, 类似于我们网页中的懒加载.
|
||||
|
||||
> 销毁
|
||||
|
||||
当元素滚动到视图之外时,关联的元素子树、状态和渲染对象将被销毁, 进入视觉窗口的元素将以懒加载的形式进行创建。
|
||||
|
||||
""";
|
||||
|
||||
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/components/Grid/SliverGrid';
|
||||
|
||||
@override
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'SliverGrid',
|
||||
codeUrl: 'components/Grid/GridPaper/demo.dart',
|
||||
contentList: [
|
||||
_Text0,
|
||||
SliverGridDemo(),
|
||||
SizedBox(
|
||||
height: 100.0,
|
||||
)
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/material/SliverGrid-class.html',
|
||||
);
|
||||
}
|
||||
}
|
@ -10,8 +10,10 @@
|
||||
import "package:flutter/material.dart";
|
||||
import '../../../model/widget.dart';
|
||||
import 'GridTile/index.dart' as GridTile;
|
||||
|
||||
import 'GridView/index.dart' as GridView;
|
||||
import 'GridTileBar/index.dart' as GridTileBar;
|
||||
import 'GridPaper/index.dart' as GridPaper;
|
||||
import 'SliverGrid/index.dart' as SliverGrid;
|
||||
List<WidgetPoint> widgetPoints = [
|
||||
WidgetPoint(
|
||||
name: 'GridTile',
|
||||
@ -22,5 +24,20 @@ List<WidgetPoint> widgetPoints = [
|
||||
name: 'GridTileBar',
|
||||
routerName: GridTileBar.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => GridTileBar.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'GridView',
|
||||
routerName: GridView.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => GridView.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'GridPaper',
|
||||
routerName: GridPaper.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => GridPaper.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'SliverGrid',
|
||||
routerName: SliverGrid.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => SliverGrid.Demo(),
|
||||
)
|
||||
];
|
||||
|
@ -12,7 +12,7 @@ const String content0 = '''
|
||||
### **简介**
|
||||
> 一个提供菜单栏弹出对话框的按钮
|
||||
- 点击的时候弹出菜单栏对话框,当选择其中一项后会调用 onSelected方法。传递其所选的菜单项的值
|
||||
- 可以提供child子widget或者一个icon给它,但是并不能两者都提供
|
||||
- 可以提供一个child widget或者提供一个icon给它,但是并不能两者都提供
|
||||
- 如果什么都没有提供给 PopupMenuButton ,则会根据运行平台创建一个overflow icon
|
||||
|
||||
''';
|
||||
|
@ -15,7 +15,7 @@ import './demo.dart' as BottomNavigationBarDemo;
|
||||
|
||||
const String _text0 =
|
||||
"""### **简介**
|
||||
> BottomNavigationBar “底部导航栏”,
|
||||
> BottomNavigationBar “底部导航栏”
|
||||
- 显示在应用程序底部的导航栏,由文本标签,图标或两者形式的多个项目组成;
|
||||
- 它提供了应用程序顶级视图之间的快速导航;
|
||||
""";
|
||||
@ -26,7 +26,7 @@ const String _text1 =
|
||||
> BottomNavigationBar 底部导航栏通常与Scaffold结合使用
|
||||
- 它作为 Scaffold.bottomNavigationBar 参数;
|
||||
- BottomNavigationBar 支持0-4个之间个底部按钮数量,超出4个系统将会报异常;
|
||||
- 默认0-3个底部按钮数量时,BottomNavigationBar采用fixed的模式摆放底部按钮,当超过4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮;
|
||||
- 默认0-3个底部按钮数量时,BottomNavigationBar采用fixed的模式摆放底部按钮,当有4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮;
|
||||
- 下面的底部导航即是效果;
|
||||
""";
|
||||
|
||||
|
@ -8,7 +8,9 @@
|
||||
*/
|
||||
import 'dart:math';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/common/icon_names.dart';
|
||||
|
||||
import 'package:flutter_go/common/icon_names.dart';
|
||||
|
||||
|
||||
final int len = IconNames.names.length;
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/model/widget.dart';
|
||||
import 'package:flutter_go/model/widget.dart';
|
||||
|
||||
import './Align/index.dart' as Align;
|
||||
|
||||
|
@ -5,7 +5,7 @@
|
||||
* @Last Modified time: 2018-11-28 20:39:28
|
||||
*/
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/common/widget_demo.dart';
|
||||
import 'package:flutter_go/common/widget_demo.dart';
|
||||
import './sliverpadding_demo.dart';
|
||||
|
||||
const contentDesc0 = '''
|
||||
|
@ -1,5 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/model/widget.dart';
|
||||
import 'package:flutter_go/model/widget.dart';
|
||||
|
||||
import './Stack/index.dart' as Stack;
|
||||
import './IndexedStack/index.dart' as IndexedStack;
|
||||
|
@ -1,6 +1,6 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/common/widget_demo.dart';
|
||||
import 'package:flutter_rookie_book/widgets/themes/Material/MaterialColor/demo.dart';
|
||||
import 'package:flutter_go/common/widget_demo.dart';
|
||||
import 'package:flutter_go/widgets/themes/Material/MaterialColor/demo.dart';
|
||||
|
||||
const Text0 = '''
|
||||
### **简介**
|
||||
|
@ -1,5 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_rookie_book/common/widget_demo.dart';
|
||||
import 'package:flutter_go/common/widget_demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
const Text0 = '''
|
||||
|
@ -1,5 +1,5 @@
|
||||
name: flutter_rookie_book
|
||||
description: flutter_rookie_book
|
||||
name: flutter_go
|
||||
description: flutter_go
|
||||
|
||||
# The following defines the version and build number for your application.
|
||||
# A version number is three numbers separated by dots, like 1.2.43
|
||||
|
@ -7,7 +7,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
import 'package:flutter_rookie_book/main.dart';
|
||||
import 'package:flutter_go/main.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('Counter increments smoke test', (WidgetTester tester) async {
|
||||
|
Reference in New Issue
Block a user