码迷,mamicode.com
首页 > 其他好文 > 详细

flutter常用组件

时间:2019-08-23 11:58:50      阅读:101      评论:0      收藏:0      [点我收藏+]

标签:src   fonts   导航   ora   das   mat   完整   override   位置   

 

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  内边距

 将上面的body 替换下

body: Center(

child: Container(// 组件
child: new Text( // 创建一个text
‘Hello‘,
style: TextStyle(// 样式
fontSize: 40,
),


),

alignment: Alignment.center, // 容器对齐方式
width: 500.0,// 宽
height: 300,// 高
color: Colors.cyan, // 颜色  

)
),

 

flutter常用组件

标签:src   fonts   导航   ora   das   mat   完整   override   位置   

原文地址:https://www.cnblogs.com/yangqinoak/p/11399120.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!