TextWidget 文本组件
TextWidget 的常用属性
TextAlign: 下面的五种对齐方式 左对齐， 右对齐， 居中对齐， 从开始位置对齐
MaxLines： 显示几行
overflow： 超出范围截取后的样式 clip 直接阶段， ellipsis 后面省略号... fade 超出后渐变，
decoration ： underline 下划线 linethrough 中间穿过 none 不显示 overline 上划线
decorationStye： 下划线样式 dashed 虚线， dotted 很细的虚线 double两条实线 solid 实线 wavy 波浪线
完整代码
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// 定义MyApp 继承于静态组件
class MyApp extends StatelessWidget {
@override // 重写关键字
//返回一个组件
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(// 返回的一些组件属性
title :'first Flutter',//
home: Scaffold(// 首页
appBar: AppBar(// 导航栏
title: Text('firstDemo'),// 导航栏标题
),
body: Center(
child: Text(
'我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目我是第一个项目',
// textAlign: TextAlign.left,//对齐方式
// maxLines: 2,//最多显示几行
// overflow: TextOverflow.ellipsis,//超出部分截取样式 ...
style: TextStyle(// 文本样式
fontSize: 25.0,// 字体大小必须小数点第一位
color: Color.fromARGB(255, 255, 150, 150),// 字体颜色 rgb
decoration: TextDecoration.underline,// 下划线
decorationStyle: TextDecorationStyle.wavy //下划线样式
),
),// 居中
),
),
);
}
}
Container 容器组件 == >div
padding 内边距
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// 定义MyApp 继承于静态组件
class MyApp extends StatelessWidget {
@override // 重写关键字
//返回一个组件
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(// 返回的一些组件属性
title :'first Flutter',//
home: Scaffold(// 首页
appBar: AppBar(// 导航栏
title: Text('firstDemo'),// 导航栏标题
),
body: Center(
child: Container(// 组件
child: new Text(
'Hello',
style: TextStyle(
fontSize: 40,
),
),
alignment: Alignment.centerLeft, // 容器对齐方式
width: 320.0,// 宽
height: 300,// 高
// color: Colors.cyan, // 颜色
padding: const EdgeInsets.fromLTRB(10, 20, 0.0, 0.0), //内边距
margin: const EdgeInsets.all(10.0),// 外边距
decoration: new BoxDecoration(// 盒子
gradient: const LinearGradient(// 线形渐变
colors: [// 背景颜色
Colors.lightBlue,
Colors.greenAccent,
Colors.purple
]
)
),
)
),
),
);
}
}
ImageWidget // 图片组件
替换child container
child: Container(
child: new Image.network("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566797584600&di=8ab74c137106fff06630b9ee68921f74&imgtype=0&src=http%3A%2F%2Fadvancedtechnologiesinc.com%2Fwp-content%2Fuploads%2F2015%2F03%2Frotary-balance-scaled-wind-tunnel-model.jpg",
scale: 1.5,//图片的缩放，值越大图片越小
// fit: BoxFit.cover,//拉伸
// colorBlendMode: blenmm,
repeat: ImageRepeat.repeatX,//填充方式
),
width: 300.0,
height: 800.0,
color: Colors.lightBlue,
),
