mirror of
https://github.com/alibaba/flutter-go.git
synced 2025-07-15 03:04:25 +08:00
Add:创建 flutter go web 版
This commit is contained in:
ryan
@ -1,45 +0,0 @@
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2018/11/22
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// LastUpdateTime: 2018/11/22
|
||||
/// LastUpdateBy: xj.deng
|
||||
/// Describle:ConstrainedBox描述
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class ConstrainedBoxCreate extends StatelessWidget {
|
||||
final double currWidth;
|
||||
final String describe;
|
||||
|
||||
const ConstrainedBoxCreate({Key key,this.currWidth,this.describe}):
|
||||
super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
ConstrainedBox(
|
||||
//制定一个指定大小的盒子，限定最大最小宽高
|
||||
constraints: const BoxConstraints(
|
||||
minWidth: 100.0,
|
||||
minHeight: 20.0,
|
||||
maxWidth: 300.0,
|
||||
maxHeight: 50.0,
|
||||
),
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
|
||||
//child 宽高超过制定限制范围失效，效果宽/高=100/20区域
|
||||
width: currWidth,
|
||||
height: 250.0,
|
||||
child: Text(
|
||||
describe,
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
color: Color(0xfff8bbd0),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:56:53
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 15:56:53
|
||||
/// email: xiaojia.dxj@alibaba-inc.com
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
|
||||
const String _Text = '''
|
||||
### **简介**
|
||||
> 添加额外的限制条件到child上
|
||||
- 比如说，你限制child最小高度为50.0像素，就可以用constraints: const BoxConstraints(minHeight：50）
|
||||
|
||||
''';
|
||||
const String _Text1 = '''
|
||||
### **基本用法**
|
||||
> 添加额外的限制条件到child上
|
||||
- ex:添加ConstrainedBox约束如下，传入不同Width约束的Container效果
|
||||
minWidth: 100.0,
|
||||
minHeight: 20.0,
|
||||
maxWidth: 300.0,
|
||||
maxHeight: 50.0
|
||||
|
||||
''';
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/ConstrainedBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'ConstrainedBox',
|
||||
codeUrl: 'elements/Frame/Box/ConstrainedBox/demo.dart',
|
||||
contentList: [
|
||||
_Text,
|
||||
_Text1,
|
||||
// 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:
|
||||
'https://docs.flutter.io/flutter/widgets/ConstrainedBox-class.html',
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2018/11/22
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// LastUpdateTime: 2018/11/22
|
||||
/// LastUpdateBy: xj.deng
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class DecoratedBoxCreate extends StatelessWidget {
|
||||
DecoratedBoxCreate({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DecoratedBox(
|
||||
position: DecorationPosition.background,
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0xff7c94b6),
|
||||
//设置图片内容
|
||||
image: DecorationImage(
|
||||
///fix:BoxFit.contain: 保持图片的比例，最大程度填充容器 BoxFit.fill:容器被图片完全填充，不在意图片比例，只填充整个容器
|
||||
///fix:BoxFit.fitWidth：图片以宽被完全填充 BoxFit.fix:fixHigth:图片以高度完全填充
|
||||
fit: BoxFit.cover, //图片填充整个容器，按比例放大，多余部分被裁切
|
||||
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: 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: DecorationImage(
|
||||
fit: BoxFit.cover,
|
||||
image: ExactAssetImage('assets/images/food01.jpeg')),
|
||||
border: Border.all(
|
||||
color: Colors.blue.shade50,
|
||||
width: 5.0,
|
||||
),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class DecoratedBoxCreateShapes extends StatelessWidget {
|
||||
DecoratedBoxCreateShapes({
|
||||
Key key,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DecoratedBox(
|
||||
position: DecorationPosition.background,
|
||||
decoration: BoxDecoration(
|
||||
gradient: const LinearGradient(
|
||||
//渐变效果 线性渐变
|
||||
colors: [Colors.red, Colors.yellowAccent, Colors.lightGreenAccent]),
|
||||
// color: const Color(0xff7c94b6),
|
||||
border: Border.all(
|
||||
color: Colors.blue.shade50,
|
||||
width: 5.0,
|
||||
),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,83 +0,0 @@
|
||||
///Author: xiaojia.dxj
|
||||
///Date: 2019-01-08 15:56:49
|
||||
///Last Modified by: xiaojia.dxj
|
||||
///Last Modified time: 2019-01-08 15:56:49
|
||||
///email: xiaojia.dxj@alibaba-inc.com
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
const String _Text = """### **简介**
|
||||
> 在child绘制前或绘制后，添加额外的限制条件到child上的widget
|
||||
- 根据边界的宽高，对其child进行插入绘制
|
||||
""";
|
||||
|
||||
const String _Text1 = """### **基本用法**
|
||||
> decoration → Decoration
|
||||
- 常用于BoxDecoration
|
||||
- BoxDecoration提供多种方式来绘制以一个框
|
||||
- 盒子形状可以是圆形也可以是矩形，用borderRadius属性来绘制角度
|
||||
|
||||
> position → DecorationPosition
|
||||
- position: DecorationPosition.foreground,
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'DecoratedBox',
|
||||
codeUrl: 'elements/Frame/Box/DecoratedBox/demo.dart',
|
||||
contentList: [
|
||||
_Text,
|
||||
_Text1,
|
||||
_decoratedBoxCreate(),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/DecoratedBox-class.html',
|
||||
);
|
||||
}
|
||||
|
||||
Column _decoratedBoxCreate() {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
height: 100.0,
|
||||
width: 100.0,
|
||||
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(),
|
||||
),
|
||||
SizedBox(
|
||||
height: 10.0,
|
||||
),
|
||||
Container(
|
||||
height: 100.0,
|
||||
width: 100.0,
|
||||
child: DecoratedBoxCreateShapes(),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2018/12/2
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// LastUpdateTime: 2018/12/2
|
||||
/// LastUpdateBy: xj.deng
|
||||
/// Describle:FittedBox
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class FittedBoxDefault extends StatelessWidget {
|
||||
final BoxFit curfit;
|
||||
final String dec;
|
||||
|
||||
FittedBoxDefault({Key key, this.curfit, this.dec});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
//外部有位置约束，内部大小设定失效，保持和外部约束一致
|
||||
height: 100.0,
|
||||
width: 100.0,
|
||||
color: Color(0xfff8bbd0),
|
||||
child: FittedBox(
|
||||
fit: curfit,
|
||||
// 修改child写入布局时期分配的空间
|
||||
alignment: Alignment.center,
|
||||
//alignment修改child于父空间对齐方式，默认：Alignment.center,
|
||||
child: Container(
|
||||
color: Color(0xfff48fb1),
|
||||
child: Text(
|
||||
'fittedBox',
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Text(dec),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,105 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// LastUpdateTime: 2019-01-08
|
||||
/// LastUpdateBy: xj.deng
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
const String Text0 = """
|
||||
### **FittedBox**
|
||||
> 根据自己的需要，对child进行缩放和定位
|
||||
- 可以看看变换，在绘制时任意变换应用在子窗口的widget
|
||||
""";
|
||||
|
||||
const String Text1 = """
|
||||
### **基本用法**
|
||||
> 根据外部约束，调整child
|
||||
- 如果外部没有约束，按照child的大小。
|
||||
- 如果外部有约束，按照外部约束调整自身大小，然后缩放调整child，根据条件进行放置
|
||||
- BoxFix 属性，可修改child写入布局时期分配的空间
|
||||
- alignment修改child于父空间对齐方式，默认：Alignment.center,
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/FittedBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'FittedBox',
|
||||
codeUrl: 'elements/Frame/Box/Fittedbox/demo.dart',
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/FittedBox-class.html',
|
||||
contentList: [
|
||||
Text0,
|
||||
Text1,
|
||||
_fittedBoxCreate(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Column _fittedBoxCreate() {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
FittedBoxDefault(
|
||||
//设置child写入布局期间分配空间
|
||||
curfit: BoxFit.contain,
|
||||
dec: 'contain',
|
||||
),
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.fill,
|
||||
dec: 'fill',
|
||||
),
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.cover,
|
||||
dec: 'cover',
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(
|
||||
height: 20.0,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.fitHeight,
|
||||
dec: 'fitHeight',
|
||||
),
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.fitWidth,
|
||||
dec: 'fitWidth',
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(
|
||||
height: 20.0,
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.none,
|
||||
dec: 'none',
|
||||
),
|
||||
FittedBoxDefault(
|
||||
curfit: BoxFit.scaleDown,
|
||||
dec: 'scaleDown',
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,72 +0,0 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class LimitedBoxDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
width: 100,
|
||||
height: 100,
|
||||
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),
|
||||
),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,52 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:56:35
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 15:56:35
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
const String Text0 = """
|
||||
### **LimitedBox**
|
||||
> 对最大宽高进行限制的控件（前提是LimitedBox不受约束）
|
||||
- 即：将child限制在指定的最大宽高中
|
||||
- 这就使得child自身没有约束大小的时候具有了外部约束，依然控制了其大小
|
||||
- 例如：通过给LimitedBox最大高度(maxHeight)，widget通常会调整其自身的大小去适应父窗体，但是，当放置在竖直（cloumn）列表中时，它将采用给定的高度
|
||||
""";
|
||||
|
||||
const String Text1 = """
|
||||
### **基本用法**
|
||||
> widget 限制child最大宽高，如下：
|
||||
- 如果LimitedBox外部宽度没有被约束，child的宽受到LimitedBox最大宽度（maxWidth）属性限制
|
||||
- 同理，LimitedBox外部高度没有约束，child的高受到LimitedBox最大高度（maxHeight）属性限制
|
||||
|
||||
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/LimitedBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'LimitedBox',
|
||||
codeUrl: 'elements/Frame/Box/LimitedBox/demo.dart',
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/LimitedBox-class.html',
|
||||
contentList: [
|
||||
Text0,
|
||||
Text1,
|
||||
LimitedBoxDemo(),
|
||||
SizedBox(height: 30),
|
||||
LimitedBoxColumnDemo(),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,44 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class OverflowBoxDefault extends StatelessWidget {
|
||||
final double curmaxHeight;
|
||||
final double curmaxWidth;
|
||||
final double curHeight;
|
||||
final double curWidth;
|
||||
final AlignmentGeometry curalignment;
|
||||
|
||||
OverflowBoxDefault(
|
||||
{Key key,
|
||||
this.curmaxHeight,
|
||||
this.curmaxWidth,
|
||||
this.curWidth,
|
||||
this.curHeight,
|
||||
this.curalignment})
|
||||
: super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return OverflowBox(
|
||||
minHeight: 80.0,
|
||||
minWidth: 80.0,
|
||||
//设置最大宽，高
|
||||
maxWidth: curmaxWidth,
|
||||
maxHeight: curmaxHeight,
|
||||
|
||||
//调整child位置
|
||||
alignment: curalignment,
|
||||
child: Container(
|
||||
//widget宽高大于overflowBox设置的最大，以overflowbox设置的最大宽高为限制，
|
||||
//小于overflowBox 设置的最大限度，子widget能够完全显示
|
||||
height: curHeight,
|
||||
width: curWidth,
|
||||
child: Text(
|
||||
"$curmaxWidth * $curmaxHeight",
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
color: Color(0xfff48fb1),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,101 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:56:31
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 15:56:31
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as overflowBox;
|
||||
|
||||
const String Text0 = """### **OverflowBox简介**
|
||||
> 它对child施加的约束不同于从其父控件获得的约束，可能允许child溢出父控件的空间.
|
||||
- 当OverflowBox的最大尺寸大于child的时候，child可以完整显示，当其小于child的时候，则以最大尺寸为基准，当然，这个尺寸都是可以突破父节点的
|
||||
""";
|
||||
|
||||
const String Text1 = """
|
||||
### **基本用法**
|
||||
> OverflowBox设置最大/最小尺寸
|
||||
- SizedOverflowBox，一个特定大小的小部件，但将其原始约束传递给它的子节点，然后可能会溢出。
|
||||
- ConstrainedBox，一个对其子项施加额外约束的小部件。
|
||||
- UnconstrainedBox，一个试图让它的child在没有约束的情况下绘制的容器。
|
||||
- SizedBox，一个具有指定大小的盒子。
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/OverflowBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'OverflowBox',
|
||||
codeUrl: 'elements/Frame/Box/OverflowBox/demo.dart',
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/OverflowBox-class.html',
|
||||
contentList: [
|
||||
Text0,
|
||||
Text1,
|
||||
_overflowBoxCreate(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Column _overflowBoxCreate() {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: <Widget>[
|
||||
Text("宽高都小于最小限制"),
|
||||
Container(
|
||||
width: 100.0,
|
||||
height: 100.0,
|
||||
color: Color(0xfff8bbd0),
|
||||
child: overflowBox.OverflowBoxDefault(
|
||||
curmaxHeight: 150.0,
|
||||
curmaxWidth: 150.0,
|
||||
//宽高都小于最小限制
|
||||
curHeight: 50.0,
|
||||
curWidth: 50.0,
|
||||
curalignment: Alignment.bottomLeft,
|
||||
),
|
||||
),
|
||||
SizedBox(height: 20),
|
||||
Text("在限制之内"),
|
||||
Container(
|
||||
width: 100.0,
|
||||
height: 100.0,
|
||||
color: Color(0xfff8bbd0),
|
||||
child: overflowBox.OverflowBoxDefault(
|
||||
curmaxHeight: 150.0,
|
||||
curmaxWidth: 150.0,
|
||||
curHeight: 80.0,
|
||||
curWidth: 80.0,
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class RotatedDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
RotatedBox(
|
||||
child: const Text('hello flutter'),
|
||||
quarterTurns: 3,
|
||||
),
|
||||
SizedBox(
|
||||
height: 20.0,
|
||||
),
|
||||
RotatedBox(
|
||||
child: const Text('hello flutter'),
|
||||
quarterTurns: 8,
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,46 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:56:13
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 15:56:13
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import 'demo.dart';
|
||||
|
||||
const String _Text = '''
|
||||
### **简介**
|
||||
> 可以将子widget旋转整数的四分之一
|
||||
- 和Transform不同，该对象在布局之前应用其旋转，整个旋转的范围仅消耗旋转的子widget所需要的空间
|
||||
''';
|
||||
|
||||
const String _Text1 = '''
|
||||
### **基本用法**
|
||||
> 旋转widget
|
||||
- 通过quarterTurns，设置child的顺时针四分之一的转数
|
||||
- ex:quarterTurns=3/8
|
||||
''';
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/RotatedBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'RotatedBox',
|
||||
codeUrl: 'elements/Frame/Box/RenderBox/demo.dart',
|
||||
contentList: [
|
||||
_Text,
|
||||
_Text1,
|
||||
RotatedDemo(),
|
||||
],
|
||||
docUrl:
|
||||
'https://docs.flutter.io/flutter/widgets/RotatedBox-class.html');
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class SizeBoxDefault extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: 140.0,
|
||||
height: 80.0,
|
||||
child: const Card(
|
||||
child: Text(
|
||||
'SizedBox',
|
||||
textDirection: TextDirection.rtl,
|
||||
),
|
||||
margin: EdgeInsets.all(20.0),
|
||||
color: Color(0xFFEF9A9A),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:55:46
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 15:55:46
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart' as sizeBox;
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/SizeBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'Table',
|
||||
codeUrl: 'elements/Frame/Box/SizedBox/demo.dart',
|
||||
contentList: [
|
||||
_sizeBoxCreate(),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/SizedBox-class.html',
|
||||
);
|
||||
}
|
||||
|
||||
Column _sizeBoxCreate() {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
Text("SizedBox",
|
||||
textAlign: TextAlign.right,
|
||||
style: TextStyle(
|
||||
fontSize: 28.0,
|
||||
fontWeight: FontWeight.bold,
|
||||
)),
|
||||
Row(
|
||||
children: <Widget>[
|
||||
sizeBox.SizeBoxDefault(),
|
||||
SizedBox(
|
||||
width: 130.0,
|
||||
height: 80.0,
|
||||
child: const Card(
|
||||
child: Text(
|
||||
'SizedBox',
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
margin: EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0),
|
||||
color: Color(0xFFE57373)),
|
||||
),
|
||||
],
|
||||
),
|
||||
SizedBox(
|
||||
width: 900.0,
|
||||
height: 50.0,
|
||||
child: const Card(
|
||||
child: Text(
|
||||
'SizedBox',
|
||||
textAlign: TextAlign.center,
|
||||
),
|
||||
color: Color(0xFFEF5350)),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
class SizeOverflowBoxDefault extends StatelessWidget {
|
||||
final double curSizeWidth;
|
||||
final double curSizeHeight;
|
||||
final String text;
|
||||
|
||||
SizeOverflowBoxDefault(
|
||||
{Key key, this.curSizeWidth, this.curSizeHeight, this.text})
|
||||
: super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedOverflowBox(
|
||||
size: Size(curSizeWidth, curSizeHeight),
|
||||
alignment: Alignment.centerRight,
|
||||
//size属性设置了大小，container 里面的大小失效,
|
||||
child: Container(
|
||||
color: Color(0xfff06292),
|
||||
width: 50.0,
|
||||
height: 50.0,
|
||||
child: Text(
|
||||
text,
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class SizeBoxDefault extends StatelessWidget {
|
||||
final double curWidth;
|
||||
final double curHeight;
|
||||
|
||||
SizeBoxDefault({Key key, this.curHeight, this.curWidth}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: curWidth,
|
||||
height: curHeight,
|
||||
child: const Card(
|
||||
child: Text(
|
||||
'SizedBox',
|
||||
style: TextStyle(color: Colors.white),
|
||||
textDirection: TextDirection.rtl,
|
||||
),
|
||||
color: Color(0xfff06292),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,107 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:55:31
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 15:55:31
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
// const String _Text = """### **SizeBox简介**
|
||||
// > 常用的一个控件，设置具体尺寸。
|
||||
// - sizebox设置width，height时候，强制child宽高为该设置，
|
||||
// - sizebox的width，heigh为null，child自身设置
|
||||
// ### **属性**
|
||||
// > width：宽
|
||||
// > height：高
|
||||
// - ex:200*50 sizebox
|
||||
// """;
|
||||
const String _Text0 = """### **简介**
|
||||
> 一个特定大小的窗口小部件,将其原始约束传递给其子节点,可能会溢出。
|
||||
### **基本用法**
|
||||
> alignment：对齐
|
||||
> size： 设置部件大小
|
||||
- ex:为方便看效果，现设置幕布大小为(Container)200*50。图一
|
||||
|
||||
- ex:图一，基础上添加一个不设置size属性的SizeOverflowBox。图二
|
||||
|
||||
- ex:图二，添加size属性，100*20,图三
|
||||
|
||||
- ex:图三，添加 alignment: Alignment.center,
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/SizeOverflowBox';
|
||||
|
||||
_DemoState createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'SizeOverflowBox',
|
||||
codeUrl: 'elements/Frame/Box/SizedOverflowBox/demo.dart',
|
||||
contentList: [
|
||||
// _Text,
|
||||
_Text0,
|
||||
_sizedOverflowBoxCreate(),
|
||||
],
|
||||
docUrl: 'https://docs.flutter.io/flutter/widgets/SizedBox-class.html',
|
||||
);
|
||||
}
|
||||
|
||||
Column _sizedOverflowBoxCreate() {
|
||||
return Column(
|
||||
children: <Widget>[
|
||||
SizeBoxDefault(
|
||||
curWidth: 200.0,
|
||||
curHeight: 50.0,
|
||||
),
|
||||
SizedBox(height: 20.0),
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
),
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
alignment: Alignment.topCenter,
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
child: SizeOverflowBoxDefault(
|
||||
text: "SizeBox",
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
child: SizeOverflowBoxDefault(
|
||||
text: "box",
|
||||
curSizeWidth: 100.0,
|
||||
curSizeHeight: 20.0,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
margin: EdgeInsets.only(top: 10.0),
|
||||
color: Color(0xffd81b60),
|
||||
width: 200.0,
|
||||
height: 50.0,
|
||||
alignment: Alignment.center,
|
||||
child: SizeOverflowBoxDefault(
|
||||
text: "box",
|
||||
curSizeWidth: 100.0,
|
||||
curSizeHeight: 20.0,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,24 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
class UnconstrainedBoxDemo extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return UnconstrainedBox(
|
||||
constrainedAxis: Axis.vertical,
|
||||
textDirection: TextDirection.rtl,
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
width: 100.0,
|
||||
height: 100.0,
|
||||
color: Color(0xfff48fb1),
|
||||
child: Text(
|
||||
"data",
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,50 +0,0 @@
|
||||
|
||||
/// Author: xiaojia.dxj
|
||||
/// Date: 2019-01-08 15:57:00
|
||||
/// Email: xiaojia.dxj@alibaba-inc.com
|
||||
/// Last Modified by: xiaojia.dxj
|
||||
/// Last Modified time: 2019-01-08 16:00:14
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:flutter_go/components/widget_demo.dart';
|
||||
import './demo.dart';
|
||||
|
||||
const String Text0 = """### **简介**
|
||||
> 跟ConstrainedBox相反，是不添加任何约束条件到child上，让child按照其原始的尺寸渲染
|
||||
- 它的作用就是给child一个尽可能大的空间，不加约束的让其显示。
|
||||
- 如果该widget不能扩展到到足够容纳整个child的空间，child将被裁剪
|
||||
""";
|
||||
|
||||
const String Text1 = """
|
||||
### **基本用法**
|
||||
- alignment 属性:控制child对齐方式
|
||||
- textDirection 属性：控制文本对齐
|
||||
- constrainedAxis 属性：如果有，就使用
|
||||
|
||||
""";
|
||||
|
||||
class Demo extends StatefulWidget {
|
||||
static const String routeName = '/element/Frame/Box/UnconstrainedBox';
|
||||
|
||||
@override
|
||||
State<StatefulWidget> createState() => _DemoState();
|
||||
}
|
||||
|
||||
class _DemoState extends State<Demo> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return WidgetDemo(
|
||||
title: 'UnconstrainedBox',
|
||||
// desc: 'Layout-Row 使用',
|
||||
codeUrl: 'elements/Frame/Box/UnconstrainedBox/demo.dart',
|
||||
docUrl:
|
||||
'https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html',
|
||||
contentList: [
|
||||
Text0,
|
||||
Text1,
|
||||
UnconstrainedBoxDemo(),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
import "package:flutter/material.dart";
|
||||
|
||||
import '../../../../model/widget.dart';
|
||||
import 'ConstrainedBox/index.dart' as ConstrainedBox;
|
||||
import 'DecoratedBox/index.dart' as DecoratedBox;
|
||||
import 'SizeBox/index.dart' as SizeBox;
|
||||
import 'SizedOverflowBox/index.dart' as SizedOverflowBox;
|
||||
import 'UnconstrainedBox/index.dart' as UnconstrainedBox;
|
||||
import 'OverflowBox/index.dart' as OverflowBox;
|
||||
import 'FittedBox/index.dart' as FittedBox;
|
||||
import 'LimitedBox/index.dart' as LimitedBox;
|
||||
import 'RotatedBox/index.dart' as RotatedBox;
|
||||
|
||||
List<WidgetPoint> widgetPoints = [
|
||||
WidgetPoint(
|
||||
name: 'ConstrainedBox',
|
||||
routerName: ConstrainedBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => ConstrainedBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'DecoratedBox',
|
||||
routerName: DecoratedBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => DecoratedBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'SizeBox',
|
||||
routerName: SizeBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => SizeBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'SizedOverflowBox',
|
||||
routerName: SizedOverflowBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => SizedOverflowBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'UnconstrainedBox',
|
||||
routerName: UnconstrainedBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => UnconstrainedBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'OverflowBox',
|
||||
routerName: OverflowBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => OverflowBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'FittedBox',
|
||||
routerName: FittedBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => FittedBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'LimitedBox',
|
||||
routerName: LimitedBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => LimitedBox.Demo(),
|
||||
),
|
||||
WidgetPoint(
|
||||
name: 'RotatedBox',
|
||||
routerName: RotatedBox.Demo.routeName,
|
||||
buildRouter: (BuildContext context) => RotatedBox.Demo(),
|
||||
),
|
||||
];
|
||||
Reference in New Issue
Block a user