This commit is contained in:
xiaojia22326@163.com
2019-01-31 17:18:16 +08:00
parent acfe8f6ed8
commit c4cbd02123
130 changed files with 773 additions and 913 deletions

View File

@ -29,12 +29,12 @@ class ConstrainedBoxCreate extends StatelessWidget {
maxWidth: 300.0,
maxHeight: 50.0,
),
child: new Container(
child: Container(
margin: const EdgeInsets.only(left: 20.0, right: 20.0),
//child 宽高超过制定限制范围失效,效果宽/高=100/20区域
width: currWidth,
height: 250.0,
child: new Text(
child: Text(
describe,
style: TextStyle(color: Colors.white),
),

View File

@ -21,7 +21,7 @@ class DecoratedBoxCreate extends StatelessWidget {
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
//设置图片内容
image: new DecorationImage(
image: DecorationImage(
fit: BoxFit.cover,
image: ExactAssetImage('assets/images/food01.jpeg')),
//外宽边框,可以不设置
@ -46,7 +46,7 @@ class DecoratedBoxCreateTwo extends StatelessWidget {
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
//设置图片内容
image: new DecorationImage(
image: DecorationImage(
fit: BoxFit.cover,
image: ExactAssetImage('assets/images/food01.jpeg')),
//根据传入的不同大小,呈现图片效弧度不同,
@ -67,7 +67,7 @@ class DecoratedBoxCreateShape extends StatelessWidget {
position: DecorationPosition.background,
decoration: BoxDecoration(
color: const Color(0xff7c94b6),
image: new DecorationImage(
image: DecorationImage(
fit: BoxFit.cover,
image: ExactAssetImage('assets/images/food01.jpeg')),
border: Border.all(

View File

@ -45,7 +45,7 @@ class _DemoState extends State<Demo> {
}
Column _decoratedBoxCreate() {
return new Column(
return Column(
children: <Widget>[
Container(
height: 100.0,

View File

@ -15,11 +15,11 @@ class FittedBoxDefault extends StatelessWidget {
final BoxFit curfit;
final String dec;
FittedBoxDefault({Key key, this.curfit, this.dec});
FittedBoxDefault({Key key, this.curfit, this.dec});
@override
Widget build(BuildContext context) {
return new Column(
return Column(
children: <Widget>[
Container(
//外部有位置约束,内部大小设定失效,保持和外部约束一致

View File

@ -1,4 +1,3 @@
/**
* Author: xiaojia.dxj
* Date: 2019-01-08
@ -9,7 +8,7 @@
*/
import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart';
import './demo.dart' as fittedBox;
import './demo.dart';
const String Text0 = """
### **FittedBox**
@ -53,18 +52,16 @@ class _DemoState extends State<Demo> {
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
fittedBox.FittedBoxDefault(
/**
* 设置child写入布局期间分配空间
*/
FittedBoxDefault(
//设置child写入布局期间分配空间
curfit: BoxFit.contain,
dec: 'contain',
),
fittedBox.FittedBoxDefault(
FittedBoxDefault(
curfit: BoxFit.fill,
dec: 'fill',
),
fittedBox.FittedBoxDefault(
FittedBoxDefault(
curfit: BoxFit.cover,
dec: 'cover',
),
@ -76,11 +73,11 @@ class _DemoState extends State<Demo> {
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
fittedBox.FittedBoxDefault(
FittedBoxDefault(
curfit: BoxFit.fitHeight,
dec: 'fitHeight',
),
fittedBox.FittedBoxDefault(
FittedBoxDefault(
curfit: BoxFit.fitWidth,
dec: 'fitWidth',
),
@ -92,11 +89,11 @@ class _DemoState extends State<Demo> {
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
fittedBox.FittedBoxDefault(
FittedBoxDefault(
curfit: BoxFit.none,
dec: 'none',
),
fittedBox.FittedBoxDefault(
FittedBoxDefault(
curfit: BoxFit.scaleDown,
dec: 'scaleDown',
),

View File

@ -10,11 +10,11 @@ class OverflowBoxDefault extends StatelessWidget {
OverflowBoxDefault(
{Key key,
this.curmaxHeight,
this.curmaxWidth,
this.curWidth,
this.curHeight,
this.curalignment})
this.curmaxHeight,
this.curmaxWidth,
this.curWidth,
this.curHeight,
this.curalignment})
: super(key: key);
@override
@ -25,18 +25,18 @@ class OverflowBoxDefault extends StatelessWidget {
//设置最大宽,高
maxWidth: curmaxWidth,
maxHeight: curmaxHeight,
/**
* 调整child位置
*/
//调整child位置
alignment: curalignment,
child: Container(
/**
* widget宽高大于overflowBox设置的最大以overflowbox设置的最大宽高为限制
* 小于overflowBox 设置的最大限度子widget能够完全显示
* * */
//widget宽高大于overflowBox设置的最大以overflowbox设置的最大宽高为限制
//小于overflowBox 设置的最大限度子widget能够完全显示
height: curHeight,
width: curWidth,
child: Text("$curmaxWidth * $curmaxHeight",style: TextStyle(color: Colors.white),),
child: Text(
"$curmaxWidth * $curmaxHeight",
style: TextStyle(color: Colors.white),
),
color: Color(0xfff48fb1),
),
);

View File

@ -76,7 +76,10 @@ class _DemoState extends State<Demo> {
),
),
SizedBox(height: 20),
SizedBox(height: 50,child: Text("宽高都大于最大限制"),),
SizedBox(
height: 50,
child: Text("宽高都大于最大限制"),
),
Container(
width: 100.0,
height: 100.0,
@ -90,7 +93,6 @@ class _DemoState extends State<Demo> {
curalignment: Alignment.center,
),
),
],
);
}

View File

@ -1,22 +0,0 @@
import 'package:flutter/material.dart';
class RenderBoxDemo extends StatefulWidget {
_RenderBoxDemoState createState() => _RenderBoxDemoState();
}
class _RenderBoxDemoState extends State<RenderBoxDemo> {
@override
Widget build(BuildContext context) {
return Container(
// child: RenderFoo(),
);
}
}
class RenderFoo extends RenderBox {
@override
bool get hasSize => super.hasSize;
@override
BoxConstraints get constraints => super.constraints;
}

View File

@ -1,62 +0,0 @@
/*
* @Author: xiaojia.dxj
* @Date: 2019-01-08 15:56:26
* @Last Modified by: xiaojia.dxj
* @Last Modified time: 2019-01-08 15:56:26
*/
import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart';
const String _Text = '''
### **简介**
> BoxConstraints为抽象类我们可以使用BoxConstraints,一个不可边的约束布局renderBox布局
- 一个尺寸尊重一个BoxConstraints当且仅当以下关系式的成立
minWidth <= Size.width <= maxWidth
minHeight <= Size.height <= maxHeight
约束本身必须满足这些关系:
0.0 <= minWidth <= maxWidth <= double.infinity
0.0 <= minHeight <= maxHeight <= double.infinity
double.infinity是每个约束的合法值。
''';
class Demo extends StatefulWidget {
static const String routeName = '/element/Frame/Box/RenderBox';
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'Table',
codeUrl: 'elements/Frame/Box/RenderBox/demo.dart',
contentList: [
_Text,
_sizeBoxCreate(),
],
docUrl: 'https://docs.flutter.io/flutter/widgets/RenderBox-class.html',
);
}
Column _sizeBoxCreate() {
return new Column(
children: <Widget>[
/**
* Immutable layout constraints for RenderBox layout.
*/
SizedBox(
width: 900.0,
height: 50.0,
child: const Card(
child: Text(
'SizedBox',
textAlign: TextAlign.center,
),
color: Color(0xFFEF5350)),
),
],
);
}
}

View File

@ -28,15 +28,15 @@ class _DemoState extends State<Demo> {
}
Column _sizeBoxCreate() {
return new Column(
return Column(
children: <Widget>[
new Text("SizedBox",
Text("SizedBox",
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 28.0,
fontWeight: FontWeight.bold,
)),
new Row(
Row(
children: <Widget>[
sizeBox.SizeBoxDefault(),
SizedBox(

View File

@ -7,10 +7,7 @@ class SizeOverflowBoxDefault extends StatelessWidget {
final String text;
SizeOverflowBoxDefault(
{Key key,
this.curSizeWidth,
this.curSizeHeight,
this.text})
{Key key, this.curSizeWidth, this.curSizeHeight, this.text})
: super(key: key);
@override
@ -23,7 +20,7 @@ class SizeOverflowBoxDefault extends StatelessWidget {
color: Color(0xfff06292),
width: 50.0,
height: 50.0,
child: new Text(
child: Text(
text,
style: TextStyle(color: Colors.white),
),
@ -36,8 +33,7 @@ class SizeBoxDefault extends StatelessWidget {
final double curWidth;
final double curHeight;
SizeBoxDefault({Key key, this.curHeight, this.curWidth})
: super(key: key);
SizeBoxDefault({Key key, this.curHeight, this.curWidth}) : super(key: key);
@override
Widget build(BuildContext context) {

View File

@ -6,7 +6,7 @@
*/
import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart';
import './demo.dart' as sizeBox;
import './demo.dart';
// const String _Text = """### **SizeBox简介**
// > 常用的一个控件,设置具体尺寸。
@ -53,47 +53,47 @@ class _DemoState extends State<Demo> {
}
Column _sizedOverflowBoxCreate() {
return new Column(
return Column(
children: <Widget>[
sizeBox.SizeBoxDefault(
SizeBoxDefault(
curWidth: 200.0,
curHeight: 50.0,
),
SizedBox(height: 20.0),
Container(
margin: new EdgeInsets.only(top: 10.0),
margin: EdgeInsets.only(top: 10.0),
color: Color(0xffd81b60),
width: 200.0,
height: 50.0,
),
Container(
margin: new EdgeInsets.only(top: 10.0),
margin: EdgeInsets.only(top: 10.0),
color: Color(0xffd81b60),
alignment: Alignment.topCenter,
width: 200.0,
height: 50.0,
child: sizeBox.SizeOverflowBoxDefault(
child: SizeOverflowBoxDefault(
text: "SizeBox",
),
),
Container(
margin: new EdgeInsets.only(top: 10.0),
margin: EdgeInsets.only(top: 10.0),
color: Color(0xffd81b60),
width: 200.0,
height: 50.0,
child: sizeBox.SizeOverflowBoxDefault(
child: SizeOverflowBoxDefault(
text: "box",
curSizeWidth: 100.0,
curSizeHeight: 20.0,
),
),
Container(
margin: new EdgeInsets.only(top: 10.0),
margin: EdgeInsets.only(top: 10.0),
color: Color(0xffd81b60),
width: 200.0,
height: 50.0,
alignment: Alignment.center,
child: sizeBox.SizeOverflowBoxDefault(
child: SizeOverflowBoxDefault(
text: "box",
curSizeWidth: 100.0,
curSizeHeight: 20.0,

View File

@ -1,49 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_go/components/widget_demo.dart';
const String _Text = """### **TextBox简介**
> 是一个包含一段文本的矩形
- 它与rect类似不过包含一个固定的TextDirection。
- sizebox的widthheigh为nullchild自身设置
### **属性**
> width
> height
- ex:200*50 sizebox
""";
class Demo extends StatefulWidget {
static const String routeName = '/element/Frame/Box/TextBox';
_DemoState createState() => _DemoState();
}
class _DemoState extends State<Demo> {
@override
Widget build(BuildContext context) {
return WidgetDemo(
title: 'TextBox',
codeUrl: 'elements/Frame/Box/TextBox/demo.dart',
contentList: [
_Text,
_creatTexbox(),
],
docUrl: 'https://docs.flutter.io/flutter/dart-ui/TextBox-class.html',
);
}
}
Column _creatTexbox() {
return Column(
children: <Widget>[
// Text("TextBox ",textDirection: new TextBox.fo,),
Container(
// child: TextBox.fromLTRB(270.0, 180.0, 1360.0, 730.0,TextDirection.rtl),
)
// centerSlice: new Rect.fromLTRB(270.0, 180.0, 1360.0, 730.0),
],
);
}

View File

@ -6,7 +6,7 @@ class UnconstrainedBoxDemo extends StatelessWidget {
return UnconstrainedBox(
constrainedAxis: Axis.vertical,
textDirection: TextDirection.rtl,
child: new Row(
child: Row(
children: <Widget>[
Container(
width: 100.0,

View File

@ -5,7 +5,6 @@ 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 'TextBox/index.dart' as TextBox;
import 'UnconstrainedBox/index.dart' as UnconstrainedBox;
import 'OverflowBox/index.dart' as OverflowBox;
import 'FittedBox/index.dart' as FittedBox;
@ -33,11 +32,6 @@ List<WidgetPoint> widgetPoints = [
routerName: SizedOverflowBox.Demo.routeName,
buildRouter: (BuildContext context) => SizedOverflowBox.Demo(),
),
WidgetPoint(
name: 'TextBox',
routerName: TextBox.Demo.routeName,
buildRouter: (BuildContext context) => TextBox.Demo(),
),
WidgetPoint(
name: 'UnconstrainedBox',
routerName: UnconstrainedBox.Demo.routeName,