mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-06-29 11:36:35 +08:00
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:
@ -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
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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; // 页面的索引
|
||||||
|
@ -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} ';
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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 默认的实例,无状态
|
||||||
* */
|
* */
|
||||||
|
@ -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(
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
@ -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()
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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 默认的实例,无状态
|
||||||
* */
|
* */
|
||||||
|
@ -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();
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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();
|
||||||
|
|
||||||
|
@ -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 {
|
||||||
|
@ -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.center,Alignment.bottomLeft,Alignment.topLeft等
|
- 同理:Alignment.center,Alignment.bottomLeft,Alignment.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尺寸
|
||||||
- ex:widthFactor/ heightFactor 为2.0;那么widget的宽高为child宽高的两倍
|
- ex:widthFactor/ 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'),
|
||||||
|
@ -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),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -17,7 +17,11 @@ const String _Text = '''
|
|||||||
const String _Text1 = '''
|
const String _Text1 = '''
|
||||||
### **基本用法**
|
### **基本用法**
|
||||||
> 添加额外的限制条件到child上
|
> 添加额外的限制条件到child上
|
||||||
- 比如说,你限制child最小高度为50.0像素,就可以用constraints: const BoxConstraints(minHeight:50)
|
- 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',
|
||||||
|
@ -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,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -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(),
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
@ -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),
|
||||||
|
@ -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,
|
||||||
""";
|
""";
|
||||||
|
|
||||||
|
@ -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),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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(),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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'),
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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(),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
@ -5,8 +5,8 @@ import './demo.dart';
|
|||||||
const String Text0 = """### **简介**
|
const String Text0 = """### **简介**
|
||||||
> 一个常用的widget,它结合了常见的绘画,定位和大小调整
|
> 一个常用的widget,它结合了常见的绘画,定位和大小调整
|
||||||
- 该容器首先让child填充绘制,然后再将其他的约束应用于填充范围。
|
- 该容器首先让child填充绘制,然后再将其他的约束应用于填充范围。
|
||||||
- 在绘画过程中,容器先应用给定的转换,在绘制装饰以填充的范围,然后绘制child,最后绘制前景,同时填充需要填充的范围
|
- 在绘画过程中,容器先应用给定的转换,再绘制装饰以填充的范围,然后绘制child,最后绘制前景,同时填充需要填充的范围
|
||||||
- 没有child的容器试图尽可能的大,除非传入的约束是无限制的。child的大小会被width,height等约束覆盖。
|
- 没有child的容器将尽可能的大,除非传入的约束是无限制的。child的大小会被width,height等约束覆盖。
|
||||||
""";
|
""";
|
||||||
|
|
||||||
const String Text1 = """
|
const String Text1 = """
|
||||||
|
@ -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) {
|
||||||
|
@ -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(
|
||||||
|
@ -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 = """### **基本用法**
|
||||||
|
@ -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 = """### **基本用法**
|
||||||
|
Reference in New Issue
Block a user