Merge branch 'develop' into dev/yisheng

# Conflicts:
#	lib/common/widget_demo.dart
#	lib/widgets/components/Bar/SnackBar/demo.dart
#	lib/widgets/components/Navigation/BottomNavigationBarItem/demo.dart
This commit is contained in:
ryan730
2019-01-12 17:39:40 +08:00
38 changed files with 320 additions and 241 deletions

View File

@ -18,16 +18,13 @@ class WidgetDemo extends StatefulWidget {
final String docUrl; final String docUrl;
final String title; final String title;
final String codeUrl; final String codeUrl;
final Widget bottomNaviBar;
WidgetDemo( WidgetDemo(
{Key key, {Key key,
@required this.title, @required this.title,
@required this.contentList, @required this.contentList,
@required this.codeUrl, @required this.codeUrl,
@required this.docUrl, @required this.docUrl})
this.bottomNaviBar,
})
: super(key: key); : super(key: key);
_WidgetDemoState createState() => _WidgetDemoState(); _WidgetDemoState createState() => _WidgetDemoState();
@ -39,6 +36,7 @@ class _WidgetDemoState extends State<WidgetDemo> {
Color _collectionColor; Color _collectionColor;
List widgetDemosList = new WidgetDemoList().getDemos(); List widgetDemosList = new WidgetDemoList().getDemos();
String _router = ''; String _router = '';
String _collText = '';
void showInSnackBar(String value) { void showInSnackBar(String value) {
Fluttertoast.showToast( Fluttertoast.showToast(
@ -136,32 +134,29 @@ class _WidgetDemoState extends State<WidgetDemo> {
} }
} }
void _selectValue(value){
if(value == 'doc'){
_launchURL(widget.docUrl);
}else if(value =='code'){
_launchURL(Application.github['widgetsURL'] + widget.codeUrl);
}else{
_getCollection();
}
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (_hasCollected) { if (_hasCollected) {
_collectionColor = Colors.yellow; _collectionColor = Colors.red;
_collText='取消收藏';
} else { } else {
_collectionColor = Colors.white; _collectionColor =null;
_collText='组件收藏';
} }
return Scaffold( return Scaffold(
appBar: AppBar( appBar: AppBar(
title: Text(widget.title), title: Text(widget.title),
actions: <Widget>[ actions: <Widget>[
new IconButton(
tooltip: 'widget doc',
onPressed: () {
_launchURL(widget.docUrl);
},
icon: Icon(Icons.library_books),
),
new IconButton(
tooltip: 'github code',
onPressed: () {
_launchURL(Application.github['widgetsURL'] + widget.codeUrl);
},
icon: Icon(Icons.code),
),
new IconButton( new IconButton(
tooltip: 'goBack home', tooltip: 'goBack home',
onPressed: () { onPressed: () {
@ -169,6 +164,35 @@ class _WidgetDemoState extends State<WidgetDemo> {
}, },
icon: Icon(Icons.home), icon: Icon(Icons.home),
), ),
PopupMenuButton<String>(
onSelected: _selectValue,
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'doc',
child: ListTile(
leading: Icon(Icons.library_books,size: 22.0,),
title: Text('查看文档'),
),
),
const PopupMenuDivider(),
const PopupMenuItem<String>(
value: 'code',
child: ListTile(
leading: Icon(Icons.code,size: 22.0,),
title: Text('查看Demo'),
),
),
const PopupMenuDivider(),
PopupMenuItem<String>(
value: 'collection',
child: ListTile(
leading: Icon(Icons.star,size: 22.0,color: _collectionColor,),
title: Text(_collText),
),
),
],
),
], ],
), ),
body: Container( body: Container(
@ -183,18 +207,6 @@ class _WidgetDemoState extends State<WidgetDemo> {
], ],
), ),
), ),
floatingActionButton: FloatingActionButton(
onPressed: _getCollection,
mini: true,
tooltip: '收藏',
child: Icon(
Icons.star,
color: _collectionColor,
),
backgroundColor: Theme.of(context).primaryColor,
),
bottomNavigationBar: (widget.bottomNaviBar is Widget) ? widget
.bottomNaviBar : null
); );
} }
} }

View File

@ -15,10 +15,10 @@ class ListRefresh extends StatefulWidget {
const ListRefresh([this.requestApi, this.renderItem]) : super(); const ListRefresh([this.requestApi, this.renderItem]) : super();
@override @override
State<StatefulWidget> createState() => listRefresh(); State<StatefulWidget> createState() => _ListRefreshState();
} }
class listRefresh extends State<ListRefresh> { class _ListRefreshState extends State<ListRefresh> {
bool isLoading = false; // 是否正在请求数据中 bool isLoading = false; // 是否正在请求数据中
bool _hasMore = true; // 是否还有更多数据可加载 bool _hasMore = true; // 是否还有更多数据可加载
int _pageIndex = 0; // 页面的索引 int _pageIndex = 0; // 页面的索引

View File

@ -5,7 +5,6 @@ import 'package:flutter_rookie_book/components/ListRefresh.dart' as listComp;
import 'package:flutter_rookie_book/components/Pagination.dart'; import 'package:flutter_rookie_book/components/Pagination.dart';
import './widgetFeature/FirstPageItem.dart'; import './widgetFeature/FirstPageItem.dart';
import '../common/net_utils.dart'; import '../common/net_utils.dart';
import 'package:flutter_rookie_book/common/iconNames.dart';
class FirstPage extends StatefulWidget { class FirstPage extends StatefulWidget {
@override @override
@ -49,10 +48,6 @@ class FirstPageState extends State<FirstPage> with AutomaticKeepAliveClientMixin
} }
Widget makeCard(index,item){ Widget makeCard(index,item){
const emojis = ['👲'];
var smallParts_Color = Colors.primaries[index % Colors.primaries.length];
var smallParts_icon = IconNames.Names[index % IconNames.Names.length];
var smallParts_emojis = IconNames.Names[index % IconNames.Names.length];
var myTitle = '${item.title}'; var myTitle = '${item.title}';
var myUsername = '${'👲'}: ${item.username} '; var myUsername = '${'👲'}: ${item.username} ';

View File

@ -137,27 +137,3 @@ class ListItemWidget extends StatelessWidget {
} }
} }
class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
_SliverAppBarDelegate(this._tabBar);
final TabBar _tabBar;
@override
double get minExtent => _tabBar.preferredSize.height;
@override
double get maxExtent => _tabBar.preferredSize.height;
@override
Widget build(
BuildContext context, double shrinkOffset, bool overlapsContent) {
return new Container(
child: _tabBar,
);
}
@override
bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
return false;
}
}

View File

@ -10,28 +10,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
/*
* Checkbox 默认的实例
* */
class SnackBarFullDefault extends StatefulWidget {
const SnackBarFullDefault() : super();
@override
State<StatefulWidget> createState() => _SnackBarFullDefault();
}
/*
* SnackBar 默认的实例,有状态
* */
class _SnackBarFullDefault extends State {
@override
Widget build(BuildContext context) {
return SnackBar(
// ... // 如果没有,就是不需要有状态的 StatefulWidget
);
}
}
/* /*
* SnackBar 默认的实例,无状态 * SnackBar 默认的实例,无状态
* */ * */

View File

@ -51,19 +51,3 @@ class _BottomNavigationBarFullDefault extends State {
} }
} }
/*
* BottomNavigationBar 默认的实例,无状态
* */
class BottomNavigationBarLessDefault extends StatelessWidget {
final widget;
final parent;
const BottomNavigationBarLessDefault([this.widget, this.parent])
: super();
@override
Widget build(BuildContext context) {
return BottomNavigationBar(
);
}
}

View File

@ -45,7 +45,7 @@ class _DemoState extends State<Demo> {
codeUrl: 'components/Navigation/BottomNavigationBar/demo.dart', codeUrl: 'components/Navigation/BottomNavigationBar/demo.dart',
contentList: [allDemoBoxs(context, this)], contentList: [allDemoBoxs(context, this)],
docUrl: 'https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html', docUrl: 'https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html',
bottomNaviBar:BottomNavigationBarDemo.BottomNavigationBarFullDefault() //bottomNaviBar:BottomNavigationBarDemo.BottomNavigationBarFullDefault()
); );
} }
} }

View File

@ -9,25 +9,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
/*
* BottomNavigationBar 默认的实例
* */
class BottomNavigationBarItemFullDefault extends StatefulWidget {
const BottomNavigationBarItemFullDefault() : super();
@override
State<StatefulWidget> createState() => _BottomNavigationBarItemFullDefault();
}
/*
* BottomNavigationBarItem 默认的实例,有状态
* */
class _BottomNavigationBarItemFullDefault extends State {
@override
Widget build(BuildContext context) {
}
}
/* /*
* BottomNavigationBarItem 默认的实例,无状态 * BottomNavigationBarItem 默认的实例,无状态
* */ * */

View File

@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
class DayPickerDemo extends StatefulWidget { class DayPickerDemo extends StatefulWidget {
@override @override
State<StatefulWidget> createState() => _showDialog(); State<StatefulWidget> createState() => _DayPickerState();
} }
class _showDialog extends State<DayPickerDemo> { class _DayPickerState extends State<DayPickerDemo> {
DateTime _date = new DateTime.now(); DateTime _date = new DateTime.now();
TimeOfDay _time = new TimeOfDay.now(); TimeOfDay _time = new TimeOfDay.now();

View File

@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
class MothPickerDemo extends StatefulWidget { class MothPickerDemo extends StatefulWidget {
@override @override
State<StatefulWidget> createState() => _first(); State<StatefulWidget> createState() => _MothPickerState();
} }
class _first extends State<MothPickerDemo> { class _MothPickerState extends State<MothPickerDemo> {
DateTime _date = new DateTime.now(); DateTime _date = new DateTime.now();
Future<void> _selectDate(BuildContext context) async { Future<void> _selectDate(BuildContext context) async {

View File

@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
class ShowDatePickerDemo extends StatefulWidget { class ShowDatePickerDemo extends StatefulWidget {
@override @override
State<StatefulWidget> createState() => _showDialog(); State<StatefulWidget> createState() => _ShowDatePickerState();
} }
class _showDialog extends State<ShowDatePickerDemo> { class _ShowDatePickerState extends State<ShowDatePickerDemo> {
DateTime _date = new DateTime.now(); DateTime _date = new DateTime.now();
TimeOfDay _time = new TimeOfDay.now(); TimeOfDay _time = new TimeOfDay.now();

View File

@ -10,10 +10,10 @@ import 'package:flutter/material.dart';
class YearPickerDemo extends StatefulWidget { class YearPickerDemo extends StatefulWidget {
@override @override
State<StatefulWidget> createState() => _showDialog(); State<StatefulWidget> createState() => _YearPickerDemoState();
} }
class _showDialog extends State<YearPickerDemo> { class _YearPickerDemoState extends State<YearPickerDemo> {
DateTime _date = new DateTime.now(); DateTime _date = new DateTime.now();
Future<void> _selectDate(BuildContext context) async { Future<void> _selectDate(BuildContext context) async {

View File

@ -1,8 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart'; import 'package:flutter_markdown/flutter_markdown.dart';
import '../../../../../common/widget_demo.dart'; import '../../../../../common/widget_demo.dart';
import './demo.dart' ; import './demo.dart';
const String _flatText0 = """ const String _flatText0 = """
### **简介** ### **简介**
@ -10,18 +9,16 @@ const String _flatText0 = """
- 根据自己需求,进行控件对齐 - 根据自己需求,进行控件对齐
### **基本用法** ### **基本用法**
> alignment → AlignmentGeometry > alignment → AlignmentGeometry
- 要对齐右下方的框,您将通过此框一个比子的自然大小更大的严格约束,并且对齐Alignment.bottomRight - 要对齐右下方的框,那么对这个框对要求会比对子控件更加严肃的约束,使用:Alignment.bottomRight
- 同理Alignment.centerAlignment.bottomLeftAlignment.topLeft等 - 同理Alignment.centerAlignment.bottomLeftAlignment.topLeft等
"""; """;
const String _flatText1 = """ const String _flatText1 = """
> widthFactor / heightFactor → double > widthFactor / heightFactor → double
- 如果widthFactor / heightFactor 为空并且外部无任何约束child控件大小默认那么这个控件将根据自身尺寸最大化 - 如果widthFactor / heightFactor 为空并且外部无任何约束child控件大小默认那么这个控件将根据自身尺寸最大化
- 如果widthFactor / heightFactor 不为空并且外部无约束align将匹配对应的child尺寸 - 如果widthFactor / heightFactor 不为空并且外部无约束align将匹配对应的child尺寸
- exwidthFactor/ heightFactor 为2.0那么widget的宽高为child宽高的两倍 - exwidthFactor/ heightFactor 为2.0那么widget的宽高为child宽高的两倍
- 如果widthFactor / heightFactor 为空并且外部无约束child控件设置自身大小 - 如果widthFactor / heightFactor 为空并且外部无约束child控件将会设置自身大小
- Alignment部分标签失效
"""; """;
class Demo extends StatefulWidget { class Demo extends StatefulWidget {
@ -36,13 +33,9 @@ class _DemoState extends State<Demo> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return WidgetDemo( return WidgetDemo(
title: 'Align', title: 'Align',
codeUrl:"elements/Frame/Align/Align/demo.dart", codeUrl: "elements/Frame/Align/Align/demo.dart",
docUrl: 'https://docs.flutter.io/flutter/widgets/Align-class.html', docUrl: 'https://docs.flutter.io/flutter/widgets/Align-class.html',
contentList: [ contentList: [_flatText0, _alignCreate()],
_flatText0,
_flatText1,
_alignCreate()
],
); );
} }
@ -55,7 +48,6 @@ class _DemoState extends State<Demo> {
children: <Widget>[ children: <Widget>[
AlignAlignment(Alignment.center, 'center'), AlignAlignment(Alignment.center, 'center'),
AlignAlignment(Alignment.centerLeft, 'centerLeft'), AlignAlignment(Alignment.centerLeft, 'centerLeft'),
], ],
), ),
SizedBox(height: 10.0), SizedBox(height: 10.0),
@ -65,7 +57,6 @@ class _DemoState extends State<Demo> {
AlignAlignment(Alignment.centerRight, 'centerRight'), AlignAlignment(Alignment.centerRight, 'centerRight'),
AlignAlignment(Alignment.bottomCenter, 'btCenter'), AlignAlignment(Alignment.bottomCenter, 'btCenter'),
AlignAlignment(Alignment.topCenter, 'topCenter'), AlignAlignment(Alignment.topCenter, 'topCenter'),
], ],
), ),
SizedBox(height: 10.0), SizedBox(height: 10.0),
@ -84,13 +75,13 @@ class _DemoState extends State<Demo> {
color: Color(0xffe91e63), color: Color(0xffe91e63),
child: new Align( child: new Align(
alignment: Alignment.topLeft, alignment: Alignment.topLeft,
child: new Text("Align",style: child: new Text(
TextStyle(color: Color(0xffffffff)),), "Align",
style: TextStyle(color: Color(0xffffffff)),
),
), ),
), ),
AlignFactor(Alignment.topLeft, 2.0, 2.0, 'topleft'), AlignFactor(Alignment.topLeft, 2.0, 2.0, 'topleft'),
AlignFactor(Alignment.topRight, null, null, 'topleft'), AlignFactor(Alignment.topRight, null, null, 'topleft'),
AlignFactor(Alignment.center, null, null, 'center'), AlignFactor(Alignment.center, null, null, 'center'),
AlignFactor(Alignment.bottomLeft, null, null, 'bottomLeft'), AlignFactor(Alignment.bottomLeft, null, null, 'bottomLeft'),

View File

@ -8,12 +8,17 @@ import 'package:flutter/widgets.dart';
* LastUpdateTime: 2018/11/22 * LastUpdateTime: 2018/11/22
* LastUpdateBy: xj.deng * LastUpdateBy: xj.deng
* *
* Describle:Align描述 * Describle:ConstrainedBox描述
*/ */
class ConstracubedBox extends StatelessWidget { class ConstrainedBoxCreate extends StatelessWidget {
final double currWidth;
final String describe;
const ConstrainedBoxCreate({Key key,this.currWidth,this.describe}):
super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
children: <Widget>[ children: <Widget>[
ConstrainedBox( ConstrainedBox(
@ -21,20 +26,22 @@ class ConstracubedBox extends StatelessWidget {
constraints: const BoxConstraints( constraints: const BoxConstraints(
minWidth: 100.0, minWidth: 100.0,
minHeight: 20.0, minHeight: 20.0,
maxWidth: 500.0, maxWidth: 300.0,
maxHeight: 50.0, maxHeight: 50.0,
), ),
child: new Container( child: new Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0), margin: const EdgeInsets.only(left: 20.0, right: 20.0),
//child 宽高超过制定限制范围失效,效果宽/高=100/20区域 //child 宽高超过制定限制范围失效,效果宽/高=100/20区域
width: 600.0, width: currWidth,
height: 250.0, height: 250.0,
child: new Text('ConstrainedBox',style: TextStyle(color: Colors.white),), child: new Text(
color: Colors.red, describe,
style: TextStyle(color: Colors.white),
),
color: Color(0xfff8bbd0),
), ),
), ),
], ],
); );
} }
} }

View File

@ -17,7 +17,11 @@ const String _Text = '''
const String _Text1 = ''' const String _Text1 = '''
### **基本用法** ### **基本用法**
> 添加额外的限制条件到child上 > 添加额外的限制条件到child上
- 比如说你限制child最小高度为50.0像素就可以用constraints: const BoxConstraints(minHeight50 - ex:添加ConstrainedBox约束如下传入不同Width约束的Container效果
minWidth: 100.0,
minHeight: 20.0,
maxWidth: 300.0,
maxHeight: 50.0
'''; ''';
@ -36,7 +40,27 @@ class _DemoState extends State<Demo> {
contentList: [ contentList: [
_Text, _Text,
_Text1, _Text1,
ConstracubedBox(), // maxWidth: 300.0,
ConstrainedBoxCreate(currWidth: 500, describe: "currWidth>maxWidth"),
SizedBox(
height: 10.0,
),
ConstrainedBoxCreate(currWidth: 300, describe: "currWidth=maxWidth"),
SizedBox(
height: 10.0,
),
ConstrainedBoxCreate(currWidth: 200, describe: "currWidth<maxWidth"),
SizedBox(
height: 10.0,
),
// minWidth: 100.0,
ConstrainedBoxCreate(currWidth: 150, describe: "currWidth>minWidth"),
SizedBox(
height: 10.0,
),
ConstrainedBoxCreate(currWidth: 100, describe: "currWidth=minWidth"),
], ],
docUrl: docUrl:
'https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html', 'https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html',

View File

@ -17,15 +17,65 @@ class DecoratedBoxCreate extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return DecoratedBox( return DecoratedBox(
position: DecorationPosition.foreground, position: DecorationPosition.background,
decoration: BoxDecoration( decoration: BoxDecoration(
gradient: RadialGradient( color: const Color(0xff7c94b6),
center: const Alignment(-0.5, -0.6), //设置图片内容
radius: 0.15, image: new DecorationImage(
colors: <Color>[const Color(0xFFEEEEEE), Colors.pink.shade600], fit: BoxFit.cover,
stops: <double>[0.9, 1.0], image: ExactAssetImage('assets/images/food01.jpeg')),
//外宽边框,可以不设置
border: Border.all(
color: Colors.blue.shade50,
width: 10.0,
), ),
), ),
); );
} }
} }
class DecoratedBoxCreateTwo extends StatelessWidget {
DecoratedBoxCreateTwo({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return DecoratedBox(
position: DecorationPosition.background,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
//设置图片内容
image: new DecorationImage(
fit: BoxFit.cover,
image: ExactAssetImage('assets/images/food01.jpeg')),
//根据传入的不同大小,呈现图片效弧度不同,
borderRadius: BorderRadius.circular(90.0),
),
);
}
}
class DecoratedBoxCreateShape extends StatelessWidget {
DecoratedBoxCreateShape({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return DecoratedBox(
position: DecorationPosition.background,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
fit: BoxFit.cover,
image: ExactAssetImage('assets/images/food01.jpeg')),
border: Border.all(
color: Colors.blue.shade50,
width: 5.0,
),
shape: BoxShape.circle,
),
);
}
}

View File

@ -6,15 +6,21 @@
*/ */
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../../../../../common/widget_demo.dart'; import '../../../../../common/widget_demo.dart';
import './demo.dart' as decoratedBox; import './demo.dart';
const String _Text = """### **简介** const String _Text = """### **简介**
> 在绘制前或绘制后添加额外的限制条件到child上的widget > 在child绘制前或绘制后添加额外的限制条件到child上的widget
- 根据边界的宽高对其child进行插入绘制 - 根据边界的宽高对其child进行插入绘制
"""; """;
const String _Text1 = """### **基本用法** const String _Text1 = """### **基本用法**
> 常用于BoxDecoration > decoration → Decoration
- 常用于BoxDecoration
- BoxDecoration提供多种方式来绘制以一个框
- 盒子形状可以是圆形也可以是矩形用borderRadius属性来绘制角度
> position → DecorationPosition
- position: DecorationPosition.foreground,
"""; """;
class Demo extends StatefulWidget { class Demo extends StatefulWidget {
@ -42,9 +48,25 @@ class _DemoState extends State<Demo> {
return new Column( return new Column(
children: <Widget>[ children: <Widget>[
Container( Container(
height: 200.0, height: 100.0,
width: 200.0, width: 100.0,
child: decoratedBox.DecoratedBoxCreate(), child: DecoratedBoxCreate(),
),
SizedBox(
height: 10.0,
),
Container(
height: 100.0,
width: 100.0,
child: DecoratedBoxCreateTwo(),
),
SizedBox(
height: 10.0,
),
Container(
height: 100.0,
width: 100.0,
child: DecoratedBoxCreateShape(),
) )
], ],
); );

View File

@ -25,16 +25,14 @@ class FittedBoxDefault extends StatelessWidget {
//外部有位置约束,内部大小设定失效,保持和外部约束一致 //外部有位置约束,内部大小设定失效,保持和外部约束一致
height: 100.0, height: 100.0,
width: 100.0, width: 100.0,
color: Colors.yellow, color: Color(0xfff8bbd0),
child: FittedBox( child: FittedBox(
fit: curfit, fit: curfit,
// 修改child写入布局时期分配的空间 // 修改child写入布局时期分配的空间
alignment: Alignment.center, alignment: Alignment.center,
//alignment修改child于父空间对齐方式默认Alignment.center, //alignment修改child于父空间对齐方式默认Alignment.center,
child: Container( child: Container(
// height: 50.0, color: Color(0xfff48fb1),
// width: 50.0,
color: Colors.red,
child: Text( child: Text(
'fittedBox', 'fittedBox',
style: TextStyle(color: Colors.white), style: TextStyle(color: Colors.white),

View File

@ -22,7 +22,7 @@ const String Text1 = """
> 根据外部约束调整child > 根据外部约束调整child
- 如果外部没有约束按照child的大小。 - 如果外部没有约束按照child的大小。
- 如果外部有约束按照外部约束调整自身大小然后缩放调整child根据条件进行放置 - 如果外部有约束按照外部约束调整自身大小然后缩放调整child根据条件进行放置
- BoxFix 属性修改child写入布局时期分配的空间 - BoxFix 属性,修改child写入布局时期分配的空间
- alignment修改child于父空间对齐方式默认Alignment.center, - alignment修改child于父空间对齐方式默认Alignment.center,
"""; """;

View File

@ -4,14 +4,69 @@ import 'package:flutter/material.dart';
class LimitedBoxDemo extends StatelessWidget { class LimitedBoxDemo extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return LimitedBox( return Row(
maxWidth: 50.0, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
maxHeight: 150.0, children: <Widget>[
child: Container( Container(
width: 250.0, width: 100,
height: 150.0, height: 100,
color: Colors.red, color: Color(0xfff8bbd0),
), child: Text(
"100 * 100",
style: TextStyle(color: Colors.white),
),
),
LimitedBox(
maxWidth: 100,
maxHeight: 100,
child: Container(
width: 250,
height: 300,
child: Text(
"250 * 300",
style: TextStyle(color: Colors.white),
),
color: Color(0xfff48fb1),
),
)
],
);
}
}
class LimitedBoxColumnDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(
child: Text("Column 列表下效果"),
),
Container(
width: 100,
height: 100,
color: Color(0xfff8bbd0),
child: Text(
"100 * 100",
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 10.0),
LimitedBox(
maxWidth: 100,
maxHeight: 100,
child: Container(
width: 250,
height: 300,
child: Text(
"250 * 300",
style: TextStyle(color: Colors.white),
),
color: Color(0xfff48fb1),
),
)
],
); );
} }
} }

View File

@ -10,15 +10,17 @@ import './demo.dart';
const String Text0 = """ const String Text0 = """
### **LimitedBox** ### **LimitedBox**
> 对最大宽高进行限制的控件 > 对最大宽高进行限制的控件前提是LimitedBox不受约束
- 即将child限制在指定的最大宽高中如果LimitedBox外部没有约束那么最大宽高不受限制child的宽高受到LimitedBox最大宽高限制 - 即将child限制在指定的最大宽高中
- 这就使得child自身没有约束大小的时候具有了外部约束依然控制了其大小
- 例如通过给LimitedBox最大高度(maxHeight)widget通常会调整其自身的大小去适应父窗体但是当放置在竖直cloumn列表中时它将采用给定的高度
"""; """;
const String Text1 = """ const String Text1 = """
### **基本用法** ### **基本用法**
> widget 限制child最大宽高如下 > widget 限制child最大宽高如下
- maxHeight限制最大高度 - 如果LimitedBox外部宽度没有被约束child的宽受到LimitedBox最大宽度maxWidth属性限制
- maxWidth限制最大宽 - 同理LimitedBox外部高度没有约束child的高受到LimitedBox最大高度maxHeight属性限制
"""; """;
@ -40,6 +42,8 @@ class _DemoState extends State<Demo> {
Text0, Text0,
Text1, Text1,
LimitedBoxDemo(), LimitedBoxDemo(),
SizedBox(height: 30),
LimitedBoxColumnDemo(),
], ],
); );
} }

View File

@ -20,8 +20,8 @@ class OverflowBoxDefault extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return OverflowBox( return OverflowBox(
minHeight: 50.0, minHeight: 80.0,
minWidth: 50.0, minWidth: 80.0,
//设置最大宽,高 //设置最大宽,高
maxWidth: curmaxWidth, maxWidth: curmaxWidth,
maxHeight: curmaxHeight, maxHeight: curmaxHeight,
@ -36,7 +36,8 @@ class OverflowBoxDefault extends StatelessWidget {
* * */ * * */
height: curHeight, height: curHeight,
width: curWidth, width: curWidth,
color: Colors.red, child: Text("$curmaxWidth * $curmaxHeight",style: TextStyle(color: Colors.white),),
color: Color(0xfff48fb1),
), ),
); );
} }

View File

@ -9,7 +9,7 @@ import '../../../../../common/widget_demo.dart';
import './demo.dart' as overflowBox; import './demo.dart' as overflowBox;
const String Text0 = """### **OverflowBox简介** const String Text0 = """### **OverflowBox简介**
> 它对子进程施加的约束不同于从其父进程获得的约束,可能允许子进程溢出父进程. > 它对child施加的约束不同于从其父控件获得的约束,可能允许child溢出父控件的空间.
- 当OverflowBox的最大尺寸大于child的时候child可以完整显示当其小于child的时候则以最大尺寸为基准当然这个尺寸都是可以突破父节点的 - 当OverflowBox的最大尺寸大于child的时候child可以完整显示当其小于child的时候则以最大尺寸为基准当然这个尺寸都是可以突破父节点的
"""; """;
@ -43,46 +43,54 @@ class _DemoState extends State<Demo> {
); );
} }
Row _overflowBoxCreate() { Column _overflowBoxCreate() {
return Row( return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[ children: <Widget>[
Text("宽高都小于最小限制"),
Container( Container(
width: 100.0, width: 100.0,
height: 100.0, height: 100.0,
color: Colors.yellow, color: Color(0xfff8bbd0),
child: overflowBox.OverflowBoxDefault(
curmaxHeight: 50.0,
curmaxWidth: 50.0,
curHeight: 100.0,
curWidth: 100.0,
curalignment: Alignment.center,
),
),
Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
child: overflowBox.OverflowBoxDefault( child: overflowBox.OverflowBoxDefault(
curmaxHeight: 150.0, curmaxHeight: 150.0,
curmaxWidth: 150.0, curmaxWidth: 150.0,
//宽高都小于最小限制
curHeight: 50.0, curHeight: 50.0,
curWidth: 50.0, curWidth: 50.0,
curalignment: Alignment.bottomLeft, curalignment: Alignment.bottomLeft,
), ),
), ),
SizedBox(height: 20),
Text("在限制之内"),
Container( Container(
width: 100.0, width: 100.0,
height: 100.0, height: 100.0,
color: Colors.yellow, color: Color(0xfff8bbd0),
child: overflowBox.OverflowBoxDefault( child: overflowBox.OverflowBoxDefault(
curmaxHeight: 150.0, curmaxHeight: 150.0,
curmaxWidth: 150.0, curmaxWidth: 150.0,
curHeight: 40.0, curHeight: 80.0,
curWidth: 40.0, curWidth: 80.0,
curalignment: Alignment.topRight, curalignment: Alignment.topRight,
), ),
), ),
SizedBox(height: 20),
SizedBox(height: 50,child: Text("宽高都大于最大限制"),),
Container(
width: 100.0,
height: 100.0,
color: Color(0xfff8bbd0),
child: overflowBox.OverflowBoxDefault(
curmaxHeight: 150.0,
curmaxWidth: 150.0,
//宽高大于最大限制
curHeight: 200.0,
curWidth: 200.0,
curalignment: Alignment.center,
),
),
], ],
); );
} }

View File

@ -9,19 +9,16 @@ class UnconstrainedBoxDemo extends StatelessWidget {
child: new Row( child: new Row(
children: <Widget>[ children: <Widget>[
Container( Container(
width: 200.0, width: 100.0,
height: 200.0, height: 100.0,
color: Colors.red, color: Color(0xfff48fb1),
child: Text(
"data",
style: TextStyle(color: Colors.white),
),
), ),
], ],
), ),
// child: Text(
// 'This allows a child to render at the size it would render '
// 'if it were alone on an infinite canvas with no constraints. '
// 'This container will then attempt to adopt the same size, within'
// ' the limits of its own constraints. If it ends up with a different size, '
// 'it will align the child based on alignment. If the box cannot expand enough '
// 'to accommodate the entire child, the child will be clipped'),
); );
} }
} }

View File

@ -11,19 +11,15 @@ import './demo.dart';
const String Text0 = """### **简介** const String Text0 = """### **简介**
> 跟ConstrainedBox相反是不添加任何约束条件到child上让child按照其原始的尺寸渲染 > 跟ConstrainedBox相反是不添加任何约束条件到child上让child按照其原始的尺寸渲染
- 它的作用就是给child一个尽可能大的空间不加约束的让其显示。 - 它的作用就是给child一个尽可能大的空间不加约束的让其显示。
- 如果该widget不能扩展到到足够容纳整个child的空间child将被裁剪
"""; """;
const String Text1 = """ const String Text1 = """
### **基本用法** ### **基本用法**
mainAxisSize 属性 - alignment 属性:控制child对齐方式
- 一行的高度是有mainAxisSize属性控制默认是max - textDirection 属性控制文本对齐
- constrainedAxis 属性:如果有,就使用
mainAxisAlignment属性
- 将children放置在主轴某位置
CrossAxisAlignment 属性
- crossAxisAlignment: crossAxisAlignment.center/end/start,
- 即,根据设定的位置交叉对齐
"""; """;
class Demo extends StatefulWidget { class Demo extends StatefulWidget {
@ -44,6 +40,7 @@ class _DemoState extends State<Demo> {
'https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html', 'https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html',
contentList: [ contentList: [
Text0, Text0,
Text1,
UnconstrainedBoxDemo(), UnconstrainedBoxDemo(),
], ],
); );

View File

@ -5,8 +5,8 @@ import './demo.dart';
const String Text0 = """### **简介** const String Text0 = """### **简介**
> 一个常用的widget它结合了常见的绘画定位和大小调整 > 一个常用的widget它结合了常见的绘画定位和大小调整
- 该容器首先让child填充绘制然后再将其他的约束应用于填充范围。 - 该容器首先让child填充绘制然后再将其他的约束应用于填充范围。
- 在绘画过程中,容器先应用给定的转换,绘制装饰以填充的范围然后绘制child最后绘制前景同时填充需要填充的范围 - 在绘画过程中,容器先应用给定的转换,绘制装饰以填充的范围然后绘制child最后绘制前景同时填充需要填充的范围
- 没有child的容器试图尽可能的大除非传入的约束是无限制的。child的大小会被widthheight等约束覆盖。 - 没有child的容器尽可能的大除非传入的约束是无限制的。child的大小会被widthheight等约束覆盖。
"""; """;
const String Text1 = """ const String Text1 = """

View File

@ -34,9 +34,7 @@ class RowMainAxisAlignment extends StatelessWidget {
final CrossAxisAlignment crossStatus; final CrossAxisAlignment crossStatus;
const RowMainAxisAlignment( const RowMainAxisAlignment(this.status, this.crossStatus) : super();
this.status, this.crossStatus)
: super();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -63,8 +61,8 @@ class RowMainAxisAlignment extends StatelessWidget {
} }
} }
class RowLayout extends StatelessWidget { class RowLayoutCreate extends StatelessWidget {
const RowLayout() : super(); const RowLayoutCreate() : super();
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {

View File

@ -3,10 +3,10 @@ import '../../../../../common/widget_demo.dart';
import './demo.dart'; import './demo.dart';
const String Text0 = """### **简介** const String Text0 = """### **简介**
> Row 是一个将其child显示在水平数组的小部件 > Row 是一个将其child显示在水平数组的widget
- 将其child填充可用的横向水平空间一行高度是childs的最大高度总是满足传入的垂直约束 - 将其child填充可用的横向水平空间一行高度是childs的最大高度总是满足传入的垂直约束
- 如果你只有一个child只需要考虑使用对其或者中间位置如果多个child注意扩展水平空间(Expanded)可以将child封装在一个扩展部件里面 - 如果你只有一个child只需要考虑使用对其或者中间位置如果多个child注意扩展水平空间(Expanded)可以将child封装在一个扩展部件里面
- 当我们看到行有黄色和黑色条纹警告时候,说明行已经溢出,当行溢出,行之间空间将没有任何空间可供扩展。 - 当我们看到行有黄色和黑色条纹警告时候,说明行已经溢出,当行溢出,行之间空间将没有任何空间可供扩展。
"""; """;
@ -51,7 +51,7 @@ class _DemoState extends State<Demo> {
Column _rowCreate() { Column _rowCreate() {
return new Column( return new Column(
children: <Widget>[ children: <Widget>[
RowLayout(), RowLayoutCreate(),
Row( Row(
children: <Widget>[ children: <Widget>[
Expanded( Expanded(

View File

@ -3,8 +3,9 @@ import '../../../../../common/widget_demo.dart';
import './demo.dart'; import './demo.dart';
const String _stackText0 = """### **简介** const String _stackText0 = """### **简介**
> 显示来自子项列表的单个子项。 > 显示一个子项列表的单个子项。
- 只显示指定位置的窗口小部件,其他的位置的窗口小部件不会显示所以indexedStack的尺寸永远和最大的子节点一样。 - 只显示指定位置的widget,其他的位置的widget不会显示所以indexedStack的尺寸永远和最大的子节点一样。
- 显示的子项widget是给到了具体的索引选择出来的widget
- 如果value 为null将不显示任何内容 - 如果value 为null将不显示任何内容
"""; """;
const String _stackText1 = """### **基本用法** const String _stackText1 = """### **基本用法**

View File

@ -3,9 +3,9 @@ import '../../../../../common/widget_demo.dart';
import './demo.dart'; import './demo.dart';
const String _stackText0 = """### **简介** const String _stackText0 = """### **简介**
> 用于将多个子级相对于其框的边缘定位多用于以简单方式重叠children > 用于将多个childs相对于其框的边缘定位多用于以简单方式重叠children
- 当第一个child置于底部时堆栈按顺序绘制其子项。如果更改子项绘制顺序可以使用新顺序重新建立堆栈 - 当第一个child置于底部时堆栈按顺序绘制其子项。如果更改子项绘制顺序可以使用新顺序重新建立堆栈
- 注意stack的每一个子节点都已定位或定位定位子项必须至少一个非null属性的定位。 - 注意stack的每一个子节点都已定位或定位定位子项必须至少一个非null属性的定位。
"""; """;
const String _stackText1 = """### **基本用法** const String _stackText1 = """### **基本用法**