浏览代码

Merge pull request #21 from UnityTech/image

as page demo
/main
GitHub 6 年前
当前提交
5b7f62b5
共有 8 个文件被更改,包括 499 次插入56 次删除
  1. 450
      Assets/UIWidgets/Tests/Widgets.cs
  2. 4
      Assets/UIWidgets/painting/image_provider.cs
  3. 9
      Assets/UIWidgets/rendering/box.cs
  4. 12
      Assets/UIWidgets/rendering/image.cs
  5. 2
      Assets/UIWidgets/ui/geometry.cs
  6. 4
      Assets/UIWidgets/ui/painting/canvas_impl.cs
  7. 40
      Assets/UIWidgets/widgets/basic.cs
  8. 34
      Assets/UIWidgets/widgets/image.cs

450
Assets/UIWidgets/Tests/Widgets.cs


using UIWidgets.gestures;
using UIWidgets.ui;
using Color = UIWidgets.ui.Color;
using Image = UIWidgets.ui.Image;
using TextStyle = UIWidgets.painting.TextStyle;
namespace UIWidgets.Tests {

this.flexColumn,
this.containerSimple,
this.eventsPage,
this.asPage,
this.stack
};
this._optionStrings = this._options.Select(x => x.Method.Name).ToArray();

Widget eventsPage() {
return new EventsWaterfallScreen();
}
Widget asPage() {
return new AsScreen();
}
}
public class AsScreen : StatefulWidget {
public AsScreen(Key key = null) : base(key) {
}
public override State createState() {
return new _AsScreenState();
}
}
class _AsScreenState : State<AsScreen> {
const double headerHeight = 50.0;
Widget _buildHeader(BuildContext context) {
return new Container(
padding: EdgeInsets.only(left: 16.0, right: 8.0),
height: headerHeight,
color: CLColors.header,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: new List<Widget> {
new Container(
child: new Text(
"All Assets",
style: new TextStyle(
fontSize: 16,
color: CLColors.white
)
)
),
new CustomButton(
padding: EdgeInsets.only(4.0, 0.0, 16.0, 0.0),
child: new Icon(
Icons.notifications,
size: 18.0,
color: CLColors.icon2
)
),
new widgets.Container(
decoration: new BoxDecoration(
color: CLColors.white,
borderRadius: BorderRadius.all(3)
),
color: CLColors.white,
width: 320,
height: 36,
padding: EdgeInsets.all(10.0),
margin: EdgeInsets.only(right: 4),
child: new EditableText(
maxLines: 1,
controller: new TextEditingController("Type here to search assets"),
focusNode: new FocusNode(),
style: new TextStyle(
fontSize: 16
),
selectionColor: Color.fromARGB(255, 255, 0, 0),
cursorColor: Color.fromARGB(255, 0, 0, 0)
)
),
new CustomButton(
backgroundColor: CLColors.background4,
child: new Icon(
Icons.notifications,
size: 18.0,
color: CLColors.white
)
),
new Container(
margin: EdgeInsets.only(left: 16, right: 16),
child: new Text(
"Learn Game Development",
style: new TextStyle(
fontSize: 12,
color: CLColors.white
)
)
),
new Container(
decoration: new BoxDecoration(
border: Border.all(
color: CLColors.white)
),
margin: EdgeInsets.only(right: 16),
padding: EdgeInsets.all(4),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: new List<Widget> {
new Text(
"Plus/Pro",
style: new TextStyle(
fontSize: 11,
color: CLColors.white
)
)
}
)
),
new Container(
margin: EdgeInsets.only(right: 16),
child: new Text(
"Impressive New Assets",
style: new TextStyle(
fontSize: 12,
color: CLColors.white
)
)
),
new Container(
child: new Text(
"Shop On Old Store",
style: new TextStyle(
fontSize: 12,
color: CLColors.white
)
)
),
}
)
);
}
Widget _buildFooter(BuildContext context) {
return new Container(
color: CLColors.header,
margin: EdgeInsets.only(top: 50),
height: 90,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: new List<Widget> {
new Container(
margin: EdgeInsets.only(right: 10),
child: new Text(
"Copyright © 2018 Unity Technologies",
style: new TextStyle(
fontSize: 12,
color: CLColors.text9
)
)
),
new Container(
margin: EdgeInsets.only(right: 10),
child: new Text(
"All prices are exclusive of tax",
style: new TextStyle(
fontSize: 12,
color: CLColors.text9
)
)
),
new Container(
margin: EdgeInsets.only(right: 10),
child: new Text(
"Terms of Service and EULA",
style: new TextStyle(
fontSize: 12,
color: CLColors.text10
)
)
),
new Container(
child: new Text(
"Cookies",
style: new TextStyle(
fontSize: 12,
color: CLColors.text10
)
)
),
}
)
);
}
Widget _buildBanner(BuildContext context) {
return new Container(child:
new Container(
height: 450,
color: CLColors.white,
child: widgets.Image.network(
"https://d2ujflorbtfzji.cloudfront.net/banner/38942865-28db-482b-80c5-17809473f3c6.jpg",
fit: BoxFit.cover
)
)
);
}
Widget _buildTopAssetsRow(BuildContext context, string title) {
var testCard = new AssetCard(
"AI Template",
"INVECTOR",
45.0,
36.0,
true,
"https://d2ujflorbtfzji.cloudfront.net/key-image/46dc65c1-f605-4ccb-97e0-3d60b28cfdfe.jpg"
);
return new Container(
margin: EdgeInsets.only(left: 98),
child: new Column(
children: new List<Widget> {
new Container(
child: new Container(
margin: EdgeInsets.only(top: 50, bottom: 20),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.baseline,
children: new List<Widget> {
new Container(
child: new Text(
title,
style: new TextStyle(
fontSize: 24,
color: CLColors.black
)
)
),
new Container(
margin: EdgeInsets.only(left: 15),
child:
new Text(
"See More",
style: new TextStyle(
fontSize: 16,
color: CLColors.text4
)
)
)
})
)
),
new Row(
children: new List<Widget> {
testCard,
testCard,
testCard,
testCard,
testCard,
testCard
}
)
}
));
}
bool _onNotification(ScrollNotification notification, BuildContext context) {
return true;
}
Widget _buildContentList(BuildContext context) {
return new NotificationListener<ScrollNotification>(
onNotification: (ScrollNotification notification) => {
_onNotification(notification, context);
return true;
},
child: new Flexible(
child: new ListView(
physics: new AlwaysScrollableScrollPhysics(),
children: new List<Widget> {
_buildBanner(context),
_buildTopAssetsRow(context, "Recommanded For You"),
_buildTopAssetsRow(context, "Beach Day"),
_buildTopAssetsRow(context, "Top Free Packages"),
_buildTopAssetsRow(context, "Top Paid Packages"),
_buildFooter(context)
}
)
)
);
}
public override Widget build(BuildContext context) {
var container = new Container(
color: CLColors.background3,
child: new Container(
color: CLColors.background3,
child: new Column(
children: new List<Widget> {
this._buildHeader(context),
this._buildContentList(context),
}
)
)
);
return container;
}
}
public class AssetCard : StatelessWidget {
public AssetCard(
string name,
string category,
double price,
double priceDiscount,
bool showBadge,
string imageSrc
) {
this.name = name;
this.category = category;
this.price = price;
this.priceDiscount = priceDiscount;
this.showBadge = showBadge;
this.imageSrc = imageSrc;
}
public string name;
public string category;
public double price;
public double priceDiscount;
public bool showBadge;
public string imageSrc;
public override Widget build(BuildContext context) {
var card = new Container(
margin: EdgeInsets.only(right: 45),
color: CLColors.white,
child: new Container(
color: CLColors.white,
child: new Column(
children: new List<Widget> {
new Container(
width: 200,
height: 124,
child: widgets.Image.network(
this.imageSrc,
fit: BoxFit.fill
)
),
new Container(
width: 200,
height: 86,
padding: EdgeInsets.fromLTRB(14, 12, 14, 8),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.baseline,
children: new List<Widget> {
new Container(
height: 18,
padding: EdgeInsets.only(top: 3),
child:
new Text(
category,
style: new TextStyle(
fontSize: 11,
color: CLColors.text5
)
)
),
new Container(
height: 20,
padding: EdgeInsets.only(top: 2),
child:
new Text(
name,
style: new TextStyle(
fontSize: 14,
color: CLColors.text6
)
)
),
new Container(
height: 22,
padding: EdgeInsets.only(top: 4),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: new List<Widget> {
new Container(
child: new Row(
children: new List<Widget> {
new Container(
margin: EdgeInsets.only(right: 10),
child: new Text(
"$" + this.price,
style: new TextStyle(
fontSize: 14,
color: CLColors.text7,
decoration: TextDecoration.lineThrough
)
)
),
new Container(
child: new Text(
"$" + this.priceDiscount,
style: new TextStyle(
fontSize: 14,
color: CLColors.text8
)
)
)
})
),
showBadge
? new Container(
width: 80,
height: 18,
color: CLColors.black,
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: new List<Widget> {
new Text(
"Plus/Pro",
style: new TextStyle(
fontSize: 11,
color: CLColors.white
)
)
}
)
)
: new Container()
}
)
)
}
)
)
}
)
)
);
return card;
}
}
public class EventsWaterfallScreen : StatefulWidget {

Widget _buildHeader(BuildContext context) {
return new Container(
padding: EdgeInsets.only(left: 16.0, right: 8.0),
// color: CLColors.blue,
// color: CLColors.blue,
height: headerHeight - _offsetY,
child: new Row(
children: new List<Widget> {

if (pixels <= headerHeight) {
setState(() => { _offsetY = pixels / 2.0; });
}
} else {
}
else {
if (_offsetY != 0.0) {
setState(() => { _offsetY = 0.0; });
}

},
child: new Flexible(
child: new Container(
// color: CLColors.green,
// color: CLColors.green,
child: ListView.builder(
itemCount: 20,
itemExtent: 100,

public override Widget build(BuildContext context) {
var container = new Container(
// color: CLColors.background1,
// color: CLColors.background1,
// color: CLColors.background1,
// color: CLColors.background1,
child: new Column(
children: new List<Widget> {
this._buildHeader(context),

public static readonly Color secondary2 = new Color(0xFFF0513C);
public static readonly Color background1 = new Color(0xFF292929);
public static readonly Color background2 = new Color(0xFF383838);
public static readonly Color background3 = new Color(0xFFF5F5F5);
public static readonly Color background4 = new Color(0xFF00BCD4);
public static readonly Color text4 = new Color(0xFF002835);
public static readonly Color text5 = new Color(0xFF9E9E9E);
public static readonly Color text6 = new Color(0xFF002835);
public static readonly Color text7 = new Color(0xFF5A5A5B);
public static readonly Color text8 = new Color(0xFF239988);
public static readonly Color text9 = new Color(0xFFB3B5B6);
public static readonly Color text10 = new Color(0xFF00BCD4);
public static readonly Color dividingLine1 = new Color(0xFF666666);
public static readonly Color dividingLine2 = new Color(0xFF404040);

public static readonly Color red = new Color(0xFFFF0000);
public static readonly Color green = new Color(0xFF00FF00);
public static readonly Color blue = new Color(0xFF0000FF);
public static readonly Color header = new Color(0xFF060B0C);
}
}

4
Assets/UIWidgets/painting/image_provider.cs


}
public override ImageStreamCompleter load(NetworkImage key) {
return new OneFrameImageStreamCompleter(_loadAsync(key));
// return new OneFrameImageStreamCompleter(_loadAsyncWithCache(key));
// return new OneFrameImageStreamCompleter(_loadAsync(key));
return new OneFrameImageStreamCompleter(_loadAsyncWithCache(key));
}
public static IPromise<ImageInfo> _loadAsync(NetworkImage key) {

9
Assets/UIWidgets/rendering/box.cs


);
}
public static BoxConstraints tightFor(double width, double height) {
return new BoxConstraints(
width,
width,
height,
height
);
}
public static BoxConstraints tightFor(
double? width = null,
double? height = null

12
Assets/UIWidgets/rendering/image.cs


namespace UIWidgets.rendering {
class RenderImage : RenderBox {
public RenderImage(ui.Image image,
double width,
double height,
double? width,
double? height,
Alignment alignment = null,
double scale = 1.0
) {

}
}
private double _width;
private double? _width;
public double width {
public double? width {
get { return _width; }
set {
if (value == _width)

}
}
private double _height;
private double? _height;
public double height {
public double? height {
get { return _height; }
set {
if (value == _height)

2
Assets/UIWidgets/ui/geometry.cs


}
public static Offset operator -(Size a, Size b) {
return new Offset(a.width - b.width, a.height - b.width);
return new Offset(a.width - b.width, a.height - b.height);
}
public static Size operator *(Size a, double operand) {

4
Assets/UIWidgets/ui/painting/canvas_impl.cs


cameraMat = Camera.current.worldToCameraMatrix;
Camera.current.worldToCameraMatrix = Matrix4x4.identity;
}
Graphics.DrawMeshNow(mesh, Matrix4x4.identity);
Graphics.DrawMeshNow(mesh, this._transform);
if (Camera.current != null)
{
Camera.current.worldToCameraMatrix = cameraMat;

40
Assets/UIWidgets/widgets/basic.cs


string type;
if (this.width == double.PositiveInfinity && this.height == double.PositiveInfinity) {
type = this.GetType() + "expand";
} else if (this.width == 0.0 && this.height == 0.0) {
}
else if (this.width == 0.0 && this.height == 0.0) {
} else {
}
else {
type = this.GetType() + "";
}

}
public override void updateRenderObject(BuildContext context, RenderObject renderObject) {
((RenderAspectRatio)renderObject).aspectRatio = aspectRatio;
((RenderAspectRatio) renderObject).aspectRatio = aspectRatio;
}
public override void debugFillProperties(DiagnosticPropertiesBuilder properties) {

public TextDirection? textDirection;
public StackFit fit;
public rendering.Overflow overflow;
public override RenderObject createRenderObject(BuildContext context) {
return new RenderStack(
textDirection: textDirection ?? Directionality.of(context),

);
}
public override void updateRenderObject(BuildContext context, RenderObject renderObjectRaw) {
var renderObject = (RenderStack) renderObjectRaw;
renderObject.alignment = this.alignment;

}
public override void debugFillProperties(DiagnosticPropertiesBuilder properties) {
base.debugFillProperties(properties);
properties.add(new DiagnosticsProperty<AlignmentDirectional>("alignment", alignment));

}
public class RawImage : LeafRenderObjectWidget {
public RawImage(Key key, ui.Image image, double width, double height, double scale, Color color,
BlendMode colorBlendMode, BoxFit fit, Rect centerSlice, Alignment alignment = null,
ImageRepeat repeat = ImageRepeat.noRepeat) : base(key) {
public RawImage(
Key key,
ui.Image image,
double scale,
Color color,
BlendMode colorBlendMode,
BoxFit fit,
Rect centerSlice,
double? width = null,
double? height = null,
Alignment alignment = null,
ImageRepeat repeat = ImageRepeat.noRepeat
) : base(key) {
this.image = image;
this.width = width;
this.height = height;

public override RenderObject createRenderObject(BuildContext context) {
return new RenderImage(
this.image,
this.width,
this.height,
this.width,
this.height,
this.alignment
);
}

}
public ui.Image image;
public double width;
public double height;
public double? width;
public double? height;
public double scale;
public Color color;
public BlendMode blendMode;

34
Assets/UIWidgets/widgets/image.cs


public class Image : StatefulWidget {
public ImageProvider image;
public double width;
public double height;
public double? width;
public double? height;
public Color color;
public BoxFit fit;
public Alignment alignment;

public Image(
Key key,
ImageProvider image,
double width,
double height,
double? width = null,
double? height = null,
ImageRepeat repeat = ImageRepeat.noRepeat,
bool gaplessPlayback = false
) : base(key) {

public static Image network(
string src,
Key key = null,
double width = 0.0,
double height = 0.0,
double? width = null,
double? height = null,
Color color = null,
BlendMode colorBlendMode = BlendMode.None,
BoxFit fit = BoxFit.none,

return new Image(
key,
networkImage,
width,
height,
width,
height,
repeat,
gaplessPlayback
);

string path,
Key key = null,
double width = 0.0,
double height = 0.0,
double? width = null,
double? height = null,
Color color = null,
BlendMode colorBlendMode = BlendMode.None,
BoxFit fit = BoxFit.none,

return new Image(
key,
fileImage,
width,
height,
width,
height,
repeat,
gaplessPlayback
);

ImageStream newStream =
imageWidget.image.resolve(ImageUtil.createLocalImageConfiguration(
context,
size: new Size(imageWidget.width, imageWidget.height)
size: imageWidget.width != null && imageWidget.height != null
? new Size(imageWidget.width.Value, imageWidget.height.Value)
: null
));
_updateSourceStream(newStream);
}

public override Widget build(BuildContext context) {
var imageWidget = (Image) widget;
RawImage image = new RawImage(
null,
null,
imageWidget.width,
imageWidget.height,
imageWidget.width,
imageWidget.height,
imageWidget.alignment,
imageWidget.repeat
);

正在加载...
取消
保存