Flutter 基础(二)基本组件
  J3FDo7fyZmR7 2023年11月02日 47 0


Container

常用属性:
alignment: Alignment.bottomCenter,
height: 500,
width: 500,
padding: const EdgeInsets.fromLTRB(0, 0, 10, 50),
margin: const EdgeInsets.fromLTRB(50, 50, 50, 50),
decoration: new BoxDecoration(
color:Colors.purple ,
gradient: new SweepGradient(colors: [Colors.purple,Colors.blue,Colors.yellow]),
),

Demo

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
title: "Hello Container",
color:Colors.white,
home: new Container(
child: new Text("Hello Container",style: TextStyle(
fontSize: 12,
decoration: TextDecoration.none
),),
alignment: Alignment.bottomRight,
height: 500,
width: 500,
padding: const EdgeInsets.fromLTRB(0, 0, 10, 50),
margin: const EdgeInsets.fromLTRB(50, 50, 50, 50),
decoration: new BoxDecoration(
color: Colors.purple,
gradient: new SweepGradient(
colors: [Colors.purple, Colors.blue, Colors.yellow]),
),
)));

Text

常用属性:
textAlign: TextAlign.center/TextAlign.left……
overflow: TextOverflow.ellipsis/TextOverflow.clip/TextOverflow.fade
style: TextStyle( fontWeight: FontWeight.bold,color: Colors.red,decoration: TextDecoration.overline,decorationStyle: TextDecorationStyle.dashed,letterSpacing: 10,fontSize: 14),
maxLines:1

ps:text组件默认显示有下划线,想去掉下划线需要设置decoration: TextDecoration.none

Demo

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
title: "text Demo",
home: MyTextWidget(),
));

class MyTextWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Container(
width: 100,
height: 100,
color: Colors.blue[500],
padding: const EdgeInsets.symmetric(vertical: 10,horizontal: 10),
child: new Text(
"style1",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.purpleAccent,
fontSize: 12,
decoration: TextDecoration.none
),
),
),
new Expanded(
child: new Text(
"style2 很长很长的文本……………………,style2 很长很长的文本……………………,style2 很长很长的文本……………………",
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle( decoration: TextDecoration.none,letterSpacing: 10,fontSize: 14),
))
],
),
new Text.rich(TextSpan(
text: "text rich",
style: TextStyle(decoration: TextDecoration.lineThrough),
children: <TextSpan>[
TextSpan(text: "文本",style: TextStyle(fontStyle: FontStyle.italic,backgroundColor: Colors.red,decoration: TextDecoration.none)),
TextSpan(text: "文本",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.red,decoration: TextDecoration.overline,decorationStyle: TextDecorationStyle.dashed))
]
))
],
),
);
}
}

Image

常用属性:
Image.asset :加载资源图片,会使打包时包体积过大
Image.network:网络资源图片
Image.file :本地图片,比如相机照相后的图片预览
Image.memory:加载到内存中的图片
Image.network(
“”,
scale: 2,//放缩图片
fit: BoxFit.contain,//类似android中的scaleType属性,BoxFit几种样式下面有用到
repeat: ImageRepeat.repeat,
color: Colors.purple,
colorBlendMode: BlendMode.darken,
),

fill

完全填充,宽高比可能会变

contain

等比拉伸,直到一边填充满

cover

等比拉伸,直到2边都填充满,此时一边可能超出范围

fitWidth

等比拉伸,宽填充满

fitHeight

等比拉伸,高填充满

none

不拉伸,超出范围截取

scaleDown

只缩小,等比

Demo

Flutter 基础(二)基本组件_.net


1、创建文件夹,添加本地资源图片

Flutter 基础(二)基本组件_flutter_02


2、

在pubspec.yaml文件中的flutter标签下添加assets 然后添加本地图片路径

flutter:

# The following line ensures that the Material Icons font is
# included with your application, so that you can use the icons in
# the material Icons class.
uses-material-design: true

# To add assets to your application, add an assets section, like this:
assets:
- images/timg.jpg

3、代码

import 'package:flutter/material.dart';

void main() => runApp(new MaterialApp(
title: "Image",
home: new Column(
children: <Widget>[
new AppBar(
title: new Text("Image"),
),
new Row(
children: <Widget>[
new Container(
child: Image.asset('images/timg.jpg'),
height: 100,
width: 100,
),
new Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554051453686&di=49ba8655fcf533e41bde7a00267c80c1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F17%2F20181017150055_rvngs.thumb.700_0.jpg"),
height: 100,
),
],
),
new Row(
children: <Widget>[
new Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554051453686&di=49ba8655fcf533e41bde7a00267c80c1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F17%2F20181017150055_rvngs.thumb.700_0.jpg",
scale: 2,
),
height: 200,
width: 200,
color: Colors.lightBlue,
),
new Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554051453686&di=49ba8655fcf533e41bde7a00267c80c1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F17%2F20181017150055_rvngs.thumb.700_0.jpg",
fit: BoxFit.contain,
),
height: 100,
width: 100,
color: Colors.yellow,
)
],
),
new Row(
children: <Widget>[
new Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554051453686&di=49ba8655fcf533e41bde7a00267c80c1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F17%2F20181017150055_rvngs.thumb.700_0.jpg",
fit: BoxFit.fill,
),
height: 100,
width: 100,
color: Colors.red,
),
new Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554051453686&di=49ba8655fcf533e41bde7a00267c80c1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F17%2F20181017150055_rvngs.thumb.700_0.jpg",
fit: BoxFit.contain, //1.保持图片的宽高比
// 2.将图片放置到ImagetView的中心,然后进行向外按比例放大或者缩小,直到一个方向已经适应,
// 3、类似FIT_CENTER
),
height: 100,
width: 100,
color: Colors.purple,
margin: const EdgeInsets.all(10),
),
new Container(
child: Image.network(
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554051453686&di=49ba8655fcf533e41bde7a00267c80c1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201810%2F17%2F20181017150055_rvngs.thumb.700_0.jpg",
fit: BoxFit.cover, //保持原比例不被拉伸但是可能会被裁切 类似centercrop
),
height: 100,
width: 100,
color: Colors.purple,
margin: const EdgeInsets.all(10),
),
],
),
//混合模式
new Row(
children: <Widget>[
new Container(
child: Image.asset('images/timg.jpg',
color: Colors.purple,
colorBlendMode: BlendMode.darken,
),
height: 100,
width: 100,
),
new Container(
child: Image.asset('images/timg.jpg',
color: Colors.purple,
colorBlendMode: BlendMode.colorBurn,
),
height: 100,
width: 100,
padding: const EdgeInsets.all(10),
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15)),
border: Border.all(color: Colors.yellow, width: 3))),
new Container(
child: Image.asset('images/timg.jpg',
repeat: ImageRepeat.repeat,
),
height: 100,
width: 100,
)
],

)
],
),
));


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   24   0   0 渐变色f5
  b1UHV4WKBb2S   2023年11月13日   32   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   25   0   0 flutterDart
J3FDo7fyZmR7