flutter/flutter-go
1
0
Fork 0
mirror of https://github.com/alibaba/flutter-go.git synced 2025-08-06 00:49:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of github.com:alibaba/flutter-common-widgets-app

Browse Source
This commit is contained in:
yifeng.yl
2019-01-14 17:24:08 +08:00
parent ea9d09ad4f 5c4d1a2938
commit cdaaadc3f7
21 changed files with 442 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
lib/components/disclaimer_msg.dart
View File

@ -69,15 +69,33 @@ class DisclaimerMsgState extends State<DisclaimerMsg> {
barrierDismissible: false, // user must tap button!
builder: (BuildContext context) {
return AlertDialog(
title: Text('免责声明'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text(disclaimerText1),
Text(disclaimerText2),
],
//title: Text('免责声明'),
content:SingleChildScrollView(
child: ListBody(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(5.0, 5.0, 10.0, 10.0),
//width: 100,
height: 35,
child: Text('免责声明',style:TextStyle(fontSize: 18,fontWeight:FontWeight.w700 )),
decoration: BoxDecoration(
//color: Colors.blue,
image: DecorationImage(
fit: BoxFit.fitWidth,
image: AssetImage('assets/images/paimaiLogo.png')
),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
//alignment: Alignment.bottomRight,
)
),
SizedBox(height:20),
Text(disclaimerText1),
Text(disclaimerText2),
],
),
),
),
shape:RoundedRectangleBorder(borderRadius: new BorderRadius.circular(20.0)), // 圆角
actions: <Widget>[
Container(

10
lib/components/list_refresh.dart
View File

@ -11,8 +11,9 @@ import 'package:flutter/material.dart';
class ListRefresh extends StatefulWidget {
final renderItem;
final requestApi;
final headerView;
const ListRefresh([this.requestApi, this.renderItem]) : super();
const ListRefresh([this.requestApi, this.renderItem, this.headerView]) : super();
@override
State<StatefulWidget> createState() => _ListRefreshState();
@ -167,7 +168,11 @@ class _ListRefreshState extends State<ListRefresh> {
itemCount: items.length + 1,
itemBuilder: (context, index) {
if (index == 0 && index != items.length) {
return Container(height: 0);
if(widget.headerView is Function){
return widget.headerView();
}else {
return Container(height: 0);
}
}
if (index == items.length) {
//return _buildLoadText();
@ -178,7 +183,6 @@ class _ListRefreshState extends State<ListRefresh> {
if (widget.renderItem is Function) {
return widget.renderItem(index, items[index]);
}
//return makeCard(index,items[index]);
}
},
controller: _scrollController,

6
lib/components/pagination.dart
View File

@ -18,13 +18,11 @@ class Pagination extends StatelessWidget {
const Icon(Icons.language, semanticLabel: 'Language'),
];
final List<StoryModel> bannerStories = [];
final List<dynamic> arr = [
{'image': 'https://img.alicdn.com/tfs/TB1W4hMAwHqK1RjSZJnXXbNLpXa-519-260.jpg', 'type': 0, 'id': 9695909, 'url': 'https://www.zhihu.com/question/294145797/answer/551162834', 'title': '为什么阿里巴巴、腾讯和 Google 之类的企业都在使用 Flutter 开发 App？'},
{'image': 'https://img.alicdn.com/tfs/TB1XmFIApzqK1RjSZSgXXcpAVXa-720-338.jpg', 'type': 0, 'id': 9695859, 'url': 'https://zhuanlan.zhihu.com/p/51696594', 'title': 'Flutter 1.0 正式发布: Google 的便携 UI 工具包'},
{'image': 'https://img.alicdn.com/tfs/TB1mClCABLoK1RjSZFuXXXn0XXa-600-362.jpg', 'type': 0, 'id': 96956491409, 'url':'https://zhuanlan.zhihu.com/p/53497167','title': 'Flutter 示范应用现已开源 — 万物起源(The History of Everything)'},
{'image': 'https://img.alicdn.com/tfs/TB1fXxIAAvoK1RjSZFNXXcxMVXa-600-362.jpg', 'type': 0, 'id': 9695816, 'url': 'https://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652048101&idx=1&sn=20296088e4bd8ca33c5c9991167d9f7d&chksm=808caaa0b7fb23b65c0e5806209f8d86da6732f3a00a70353f3606018339518b0a8656f14dc5&mpshare=1&scene=2&srcid=0106SZapVysZdIS6Oc5AhNH6&from=timeline&ascene=2&devicetype=android-27&version=27000038&nettype=WIFI&abtest_cookie=BQABAAgACgALABMAFAAFAJ2GHgAjlx4AV5keAJuZHgCcmR4AAAA%3D&lang=zh_CN&pass_ticket=4K1%2FUpsxP4suPj2iubR17wbAP7r9LW9iYrPAC2dppTqv7j7JO5FWMXtcKeBRxueV&wx_header=1', 'title': 'Flutter 与 Material Design 双剑合璧，助您构建精美应用'}
{'image': 'https://img.alicdn.com/tfs/TB1fXxIAAvoK1RjSZFNXXcxMVXa-600-362.jpg', 'type': 0, 'id': 9695816, 'url': 'https://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652048101&idx=1&sn=20296088e4bd8ca33c5c9991167d9f7d&chksm=808caaa0b7fb23b65c0e5806209f8d86da6732f3a00a70353f3606018339518b0a8656f14dc5&mpsshare=1&scene=2&srcid=0106SZapVysZdIS6Oc5AhNH6&from=timeline&ascene=2&devicetype=android-27&version=27000038&nettype=WIFI&abtest_cookie=BQABAAgACgALABMAFAAFAJ2GHgAjlx4AV5keAJuZHgCcmR4AAAA%3D&lang=zh_CN&pass_ticket=4K1%2FUpsxP4suPj2iubR17wbAP7r9LW9iYrPAC2dppTqv7j7JO5FWMXtcKeBRxueV&wx_header=1', 'title': 'Flutter 与 Material Design 双剑合璧，助您构建精美应用'}
];
void _launchURL(String url) async {
@ -37,6 +35,7 @@ class Pagination extends StatelessWidget {
List<Widget> _pageSelector(BuildContext context) {
List<Widget> list = [];
List<StoryModel> bannerStories = [];
/// super.initState();
arr.forEach((item) {
bannerStories.add(StoryModel.fromJson(item));
@ -55,6 +54,7 @@ class Pagination extends StatelessWidget {
Widget build(BuildContext context) {
return
Column(
key:Key('__header__'),
//physics: AlwaysScrollableScrollPhysics(),
//padding: EdgeInsets.only(),
children: _pageSelector(context)

36
lib/components/search_input.dart
View File

@ -159,7 +159,9 @@ class _MaterialSearchState<T> extends State<MaterialSearch> {
_resultsTimer?.cancel();
}
Widget buildBody(List results) {
if (_loading) {
if (_criteria.isEmpty) {
return History();
} else if (_loading) {
return new Center(
child: new Padding(
padding: const EdgeInsets.only(top: 50.0),
@ -396,3 +398,35 @@ class SearchInput extends StatelessWidget {
}
}
// wigdet干掉.=> componets
class History extends StatefulWidget {
const History() : super();
@override
_History createState() => _History();
}
/*
* AppBar 默认的实例,有状态
* */
class _History extends State<History> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return new Center(
child: Text('这是一个即将完善的历史记录的面板'),
);
}
}

79
lib/main.dart
View File

@ -12,6 +12,7 @@ import 'common/provider.dart';
import 'model/widget.dart';
import './widgets/index.dart';
import 'package:flutter_go/components/search_input.dart';
const int ThemeColor = 0xFFC91B3A;
class MyApp extends StatelessWidget {
@ -128,49 +129,53 @@ class _MyHomePageState extends State<MyHomePage>
} else {
return null;
}
}, (value) {
}, () {});
}, (value) {}, () {});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: buildSearchInput(context)),
body: new TabBarView(controller: controller, children: <Widget>[
new FirstPage(),
new WidgetPage(db),
new CollectionPage(),
new FourthPage()
]),
bottomNavigationBar: new Material(
color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
child: new Container(
height: 65.0,
decoration: BoxDecoration(
color: const Color(0xFFF0F0F0),
boxShadow: <BoxShadow>[
new BoxShadow(
color: const Color(0xFFd0d0d0),
blurRadius: 3.0,
spreadRadius: 2.0,
offset: Offset(-1.0, -1.0),
),
],
appBar: new AppBar(title: buildSearchInput(context)),
body: new TabBarView(controller: controller, children: <Widget>[
new FirstPage(),
new WidgetPage(db),
new CollectionPage(),
new FourthPage()
]),
bottomNavigationBar: Material(
color: const Color(0xFFF0EEEF), //底部导航栏主题颜色
child: SafeArea(
child: Container(
height: 65.0,
decoration: BoxDecoration(
color: const Color(0xFFF0F0F0),
boxShadow: <BoxShadow>[
BoxShadow(
color: const Color(0xFFd0d0d0),
blurRadius: 3.0,
spreadRadius: 2.0,
offset: Offset(-1.0, -1.0),
),
child: new TabBar(
controller: controller,
indicatorColor:
Theme.of(context).primaryColor, //tab标签的下划线颜色
// labelColor: const Color(0xFF000000),
indicatorWeight: 3.0,
labelColor: Theme.of(context).primaryColor,
unselectedLabelColor: const Color(0xFF8E8E8E),
tabs: <Tab>[
new Tab(text: '业界动态', icon: new Icon(Icons.language)),
new Tab(text: '组件', icon: new Icon(Icons.extension)),
new Tab(text: '组件收藏', icon: new Icon(Icons.star)),
new Tab(text: '关于手册', icon: new Icon(Icons.favorite)),
]))));
],
),
child: TabBar(
controller: controller,
indicatorColor: Theme.of(context).primaryColor, //tab标签的下划线颜色
// labelColor: const Color(0xFF000000),
indicatorWeight: 3.0,
labelColor: Theme.of(context).primaryColor,
unselectedLabelColor: const Color(0xFF8E8E8E),
tabs: <Tab>[
Tab(text: '业界动态', icon: Icon(Icons.language)),
Tab(text: '组件', icon: Icon(Icons.extension)),
Tab(text: '组件收藏', icon: Icon(Icons.star)),
Tab(text: '关于手册', icon: Icon(Icons.favorite)),
],
),
),
),
),
);
}
void _onTabChange() {

45
lib/views/first_page.dart
View File

@ -100,25 +100,46 @@ class FirstPageState extends State<FirstPage> with AutomaticKeepAliveClientMixin
return new ListViewItem(itemUrl:codeUrl,itemTitle: myTitle,data: myUsername,);
}
headerView(){
return
Column(
children: <Widget>[
Stack(
//alignment: const FractionalOffset(0.9, 0.1),//方法一
children: <Widget>[
Pagination(),
Positioned(//方法二
top: 10.0,
left: 0.0,
child: DisclaimerMsg(key:key,pWidget:this)
),
]),
SizedBox(height: 1, child:Container(color: Theme.of(context).primaryColor)),
SizedBox(height: 10),
],
);
}
@override
Widget build(BuildContext context) {
super.build(context);
return new Column(
children: <Widget>[
new Stack(
//alignment: const FractionalOffset(0.9, 0.1),//方法一
children: <Widget>[
Pagination(),
Positioned(//方法二
top: 10.0,
left: 0.0,
child: DisclaimerMsg(key:key,pWidget:this)
),
]),
SizedBox(height: 2, child:Container(color: Theme.of(context).primaryColor)),
// new Stack(
// //alignment: const FractionalOffset(0.9, 0.1),//方法一
// children: <Widget>[
// Pagination(),
// Positioned(//方法二
// top: 10.0,
// left: 0.0,
// child: DisclaimerMsg(key:key,pWidget:this)
// ),
// ]),
// SizedBox(height: 2, child:Container(color: Theme.of(context).primaryColor)),
new Expanded(
//child: new List(),
child: listComp.ListRefresh(getIndexListData,makeCard)
child: listComp.ListRefresh(getIndexListData,makeCard,headerView)
)
]

2
lib/widgets/components/Bar/AppBar/index.dart
View File

@ -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中使用;
""";

2
lib/widgets/components/Card/Card/index.dart
View File

@ -16,7 +16,7 @@ import './demo.dart' as CardDemo;
const String _Text0 =
"""### **简介**
> Card “卡片”
- 卡片是用于表示一些相关信息的一张材料，例如相册，地理位置，用餐，联系方式等
- 卡片用于表示一些相关信息，例如相册，地理位置，用餐，联系方式等
""";

2
lib/widgets/components/Chip/ChipThemeData/index.dart
View File

@ -17,7 +17,7 @@ const String content0 = '''
const String content1 = '''
### **基本用法**
- 创建ChipThemeData最简单的方法是使用copyWith您从得到一个ChipTheme.of，
或创建一个全新的一个具有 ChipThemeData..fromDefaults。。
或创建一个全新的一个具有 ChipThemeData..fromDefaults
''';
class Demo extends StatefulWidget {

7
lib/widgets/components/Dialog/AboutDialog/index.dart
View File

@ -13,12 +13,13 @@ import 'demo.dart';
const String _Text0 = """
### **简介**
> AboutDialog 通常用于传递企业或者app的官方信息
- 这个对话框包含应用程序的图标，名称，版本号，版权和应用程序使用到的软件许可证的按钮
### **基本用法**
> 通常作为子窗口小部件传递给showDialog，后者显示对话框。
> 要显示的AboutDialog，使用showAboutDialog。
- 如果应用程序具有Drawer，则AboutListTile可以使显示AboutDialog的过程更简单。
- AboutDialog通过showAboutDialog 显示按钮调用 showLicensePage。
""";

14
lib/widgets/components/Dialog/AlertDialog/index.dart
View File

@ -12,18 +12,14 @@ import 'demo.dart';
const String _Text0 = """
### **简介**
> AlertDialog 向用户传递信息的弹出层。
> AlertDialog 向用户传递信息的弹出层。警报对话框
- 一般使用在通知用户需要确认的情况，具有可选标题和可选的操纵列表。标题显示在上方，操纵内容显示在内容区域，即下方
### **基本用法**
> 通常作为子窗口小部件传递给showDialog，后者显示对话框。
当**AlertDialog**的的元素过多过长时, 请优先考虑**SingleChildScrollView** 用来避免内容溢出
- 当**AlertDialog**的的元素过多过长时, 请优先考虑**SingleChildScrollView** 用来避免内容溢出
- 需要注意的是，由于AlertDialog 通常使用child的大小来调整自身大小，所以使用一些widget（如ListView，GridView和CustomScrollView）将无法正常工作
- 当需要给用户提供多个选项的供选择时，请使用SimpleDialog
""";

7
lib/widgets/components/Dialog/Dialog/index.dart
View File

@ -12,17 +12,14 @@ import 'demo.dart';
const String _Text0 = """
### **简介**
> AlertDialog 向用户传递信息的弹出层。
这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 **AlertDialog**或者**SimpleDialog**
> Dialog 向用户传递信息的弹出层。
-这个组件没有任何可操作的选项. 相比使用这个组件, 通常我们更喜欢使用 **AlertDialog**或者**SimpleDialog**
### **基本用法**
> 通常作为子窗口小部件传递给showDialog，后者显示对话框。
""";
const String _Text1 = """

3
lib/widgets/components/Dialog/SimpleDialog/index.dart
View File

@ -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
View 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
View 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',
);
}
}

38
lib/widgets/components/Grid/GridView/index.dart
View File

@ -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
View 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
View 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',
);
}
}

19
lib/widgets/components/Grid/index.dart
View File

@ -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(),
)
];

2
lib/widgets/components/Menu/PopupMenuButton/index.dart
View File

@ -12,7 +12,7 @@ const String content0 = '''
### **简介**
> 一个提供菜单栏弹出对话框的按钮
- 点击的时候弹出菜单栏对话框，当选择其中一项后会调用 onSelected方法。传递其所选的菜单项的值
- 可以提供child子widget或者一个icon给它，但是并不能两者都提供
- 可以提供一个child widget或者提供一个icon给它，但是并不能两者都提供
- 如果什么都没有提供给 PopupMenuButton ，则会根据运行平台创建一个overflow icon
''';

4
lib/widgets/components/Navigation/BottomNavigationBar/index.dart
View File

@ -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 模式摆放底部按钮;
- 下面的底部导航即是效果;
""";