添加SliverPrototypeExtentList组件

This commit is contained in:
toly
2020-09-21 07:36:22 +08:00
parent cf0dde4814
commit 8e5105ffc3
5 changed files with 111 additions and 1 deletions

Binary file not shown.

View File

@@ -48,7 +48,7 @@ class CustomStack extends StatelessWidget {
textDirection: TextDirection.rtl,
fit: StackFit.loose,
alignment: Alignment.topRight,
overflow: Overflow.clip,
// overflow: Overflow.clip, // 1.22.0-10.0.pre.251被去除
children: <Widget>[yellowBox, redBox, greenBox, cyanBox],
),
);

View File

@@ -0,0 +1,105 @@
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/9/21
/// contact me by email 1981462002@qq.com
/// 说明: 314 SliverPrototypeExtentList Sliver原型延伸列表 prototypeItem属性是一个Widget,该Widget负责在主轴方向上约束item尺寸但会不显示出来。delegate接受一个SliverChildDelegate完成item的创建。
// {
// "widgetId": 314,
// "name": 'SliverPrototypeExtentList基本使用',
// "priority": 1,
// "subtitle":
// "【prototypeItem】 : 主轴方向尺寸组件 【Widget】\n"
// "【delegate】 : 孩子代理 【SliverChildDelegate】",
// }
class SliverPrototypeExtentListDemo extends StatefulWidget {
@override
_SliverPrototypeExtentListDemoState createState() =>
_SliverPrototypeExtentListDemoState();
}
class _SliverPrototypeExtentListDemoState
extends State<SliverPrototypeExtentListDemo> {
final data = <Color>[
Colors.orange[50],
Colors.orange[100],
Colors.orange[200],
Colors.orange[300],
Colors.orange[400],
Colors.orange[500],
Colors.orange[600],
Colors.orange[700],
Colors.orange[800],
Colors.orange[900],
];
@override
Widget build(BuildContext context) {
return Container(
height: 300,
child: CustomScrollView(
slivers: <Widget>[_buildSliverAppBar(), _buildSliverList()],
),
);
}
Widget _buildSliverList() => SliverPrototypeExtentList(
prototypeItem: Container(
height: 80,
),
delegate: SliverChildBuilderDelegate(
(_, int index) => Container(
alignment: Alignment.center,
width: 100,
height: 60,
color: data[index],
child: Text(
colorString(data[index]),
style: TextStyle(color: Colors.white, shadows: [
Shadow(
color: Colors.black,
offset: Offset(.5, .5),
blurRadius: 2)
]),
),
),
childCount: data.length),
);
Widget _buildSliverAppBar() {
return SliverAppBar(
expandedHeight: 150.0,
leading: _buildLeading(),
title: Text('张风捷特烈'),
actions: _buildActions(),
elevation: 5,
pinned: true,
backgroundColor: Colors.orange,
flexibleSpace: FlexibleSpaceBar(
//伸展处布局
titlePadding: EdgeInsets.only(left: 55, bottom: 15), //标题边距
collapseMode: CollapseMode.parallax, //视差效果
background: Image.asset(
"assets/images/caver.webp",
fit: BoxFit.cover,
),
),
);
}
Widget _buildLeading() => Container(
margin: EdgeInsets.all(10),
child: Image.asset('assets/images/icon_head.webp'));
List<Widget> _buildActions() => <Widget>[
IconButton(
onPressed: () {},
icon: Icon(
Icons.star_border,
color: Colors.white,
),
)
];
String colorString(Color color) =>
"#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

View File

@@ -17,3 +17,4 @@ export '../Sliver/SliverPersistentHeader/node1_base.dart';
export '../Sliver/SliverToBoxAdapter/node1_base.dart';
export '../Sliver/SliverOverlapAbsorber/node1_base.dart';
export '../Sliver/SliverOverlapInjector/node1_base.dart';
export '../Sliver/SliverPrototypeExtentList/node1_base.dart';

View File

@@ -55,6 +55,10 @@ class WidgetsMap {
return [
ViewportDemo(),
];
case "SliverPrototypeExtentList":
return [
SliverPrototypeExtentListDemo(),
];
case "InputDecorator":
return [
InputDecoratorDemo(),