flutter Container组件和Text组件
在开始之前,我们先写一个最简单的入口文件:
后面,都是在这个结构的基础上面完成的。
由于Container组件和Text组件都是写在body里面的,所以下面,先将body抽离成一个组件的形式。
Container组件
在flutter里面Container组件是一个容器组件,类似于html中的div一样。
在Center组件里面添加Container组件,然后再添加Text组件,和上面的效果是一样的。
Container、Text这些自定义组件的本质都是类,有很多可选的命名参数,在Conrainer里面的常用参数包括:
- alignment :对齐方式
- decoration:背景和边框属性
- margin:
- padding
- transfrom
- height
- width
- child
Text组件
在Text组件中常用的参数如下:
- textAlign:文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐)
- textDirection:文本方向(ltr 从左至右,rtl 从右至左)
- overflow:文字超出屏幕之后的处理方式(clip裁剪,fade 渐隐,ellipsis 省略号)
- textScaleFactor:字体显示倍率
- maxLines:文字显示最大行数
- style:字体的样式设置
其中TextStyle又包括下面这些可选参数:
- decoration:文字装饰线(none 没有线,lineThrough 删除线,overline 上划线,underline 下划线)
- decorationColor:文字装饰线颜色
- decorationStyle :文字装饰线风格([dashed,dotted]虚线,double 两根线,solid 一根实线,wavy 波浪线)
- wordSpacing:单词间隙(如果是负值,会让单词变得更紧凑
- letterSpacing :字母间隙(如果是负值,会让字母变得更紧凑)
- fontStyle :文字样式(italic 斜体,normal 正常体)
- fontSize
- color
- fontWeight
import 'package:flutter/material.dart'; void main(){
runApp(MyApp());
} class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
appBar: AppBar(
title:Text("flutter demo")
),
body:HomeContent()
)
);
}
} class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Text(
'flutter Container组件和Text组件,flutter Container组件和Text组件,flutter Container组件和Text组件',
textAlign:TextAlign.left,
overflow:TextOverflow.ellipsis ,
// overflow:TextOverflow.fade ,
maxLines: 2,
textScaleFactor: 1.8,
style:TextStyle(
fontSize: 16.0,
color:Colors.red,
// color:Color.fromARGB(a, r, g, b)
fontWeight: FontWeight.w800,
fontStyle: FontStyle.italic,
decoration:TextDecoration.lineThrough,
decorationColor:Colors.white,
decorationStyle: TextDecorationStyle.dashed,
letterSpacing: 5.0
)
),
height: 300.0,
width: 300.0,
decoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width: 2.0
),
borderRadius: BorderRadius.all(
// Radius.circular(150), //圆形
Radius.circular(10),
)
),
// padding:EdgeInsets.all(20),
// padding:EdgeInsets.fromLTRB(10, 30, 5, 0)
margin: EdgeInsets.fromLTRB(10, 30, 5, 0),
// transform:Matrix4.translationValues(100,0,0)
// transform:Matrix4.rotationZ(0.3)
// transform:Matrix4.diagonal3Values(1.2, 1, 1)
alignment: Alignment.bottomLeft,
),
);
}
}
flutter Container组件和Text组件的更多相关文章
- Flutter Container 组件、Text 组件详解
Text 组件 textAlign 文本对齐方式(center 居中,left 左对齐,right 右对齐,justfy 两端对齐) textDirection 文本方向(ltr 从左至右 ...
- 关于Unity中UI中的Mask组件、Text组件和布局
一.Mask组件 遮罩,Rect Mask矩形Mask(Rect Mask2D组件),图片Mask(Mask组件)(图片Mask的透明度不为0的部分显示子图片,为0的部分不显示子图片) Rect Ma ...
- Flutter Container容器组件、Text文本组件详解
import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends Stateles ...
- 【Flutter学习】基本组件之文本组件Text
一,概述 文本组件(Text)负责显示文本和定义显示样式, 二,继承关系 Object > Diagnosticable > DiagnosticableTree > Widget ...
- 【Flutter学习】基本组件之容器组件Container
一,前言 Flutter控件本身通常由许多小型.单用途的控件组成,结合起来产生强大的效果,例如,Container是一种常用的控件,由负责布局.绘画.定位和大小调整的几个控件组成,具体来说,Conta ...
- Flutter——Container组件(容器组件)
名称 功能 alignment topCenter:顶部居中对齐 topLeft:顶部左对齐 topRight:顶部右对齐 center:水平垂直居中对齐 centerLeft:垂直居中水平居左对齐 ...
- Flutter入门之有状态组件
StatefulComponent使用方法入门 在上一篇Flutter入门之无状态组件中我们讲到了无状态组件,所谓的无状态组件指的就是其内部的状态是来自其父组件并使用final类型的变量来存储,当组件 ...
- Flutter入门之无状态组件
Flutter核心理念 flutter组件采用函数式响应框架构建,它的灵感来自于React.它设计的核心思想是组件外构建UI,简单解释一下就是组件鉴于它当前的配置和状态来描述它的视图应该是怎样的,当组 ...
- Flutter学习笔记(10)--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
随机推荐
- jenkins展示html测试报告(不使用html publisher)
最终效果: 点击『测试报告』,查看测试报告: 一开始的思路是: jenkins上展示html报告[转载] jenkins使用HTML Publisher Plugin插件 拉取报告样式缺失问题解决 ...
- sticky用法
可以用于滚动到一定距离以后让他实现定位效果. 比如滚动到50px的时候让导航栏固定定位. 用法:给最外层的div设置绝对定位 然后要固定的div设置position:sticky; top:0: 这样 ...
- java sftp判断目录是否存在
java sftp判断目录是否存在 public boolean isExistDir(String path,ChannelSftp sftp){ boolean isExist=false; tr ...
- SVG绘制随机的柱形图+php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- MongoDB ODM
安装 pip3 install mongoengine 连接MongoDB 方法一:简写 connect('students) 方法二:指定端口和地址 connect('students',host= ...
- 【ABAP系列】SAP ABAP 总结常用术语简称解析
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 总结常用术语简 ...
- AtCoder ABC 140D Face Produces Unhappiness
题目链接:https://atcoder.jp/contests/abc140/tasks/abc140_d 题目大意 有一对 N 个人, 用字符串 S 表示, S[i] 如果等于 'L' 说明这个人 ...
- 攻防世界--maze
测试文件下载:https://adworld.xctf.org.cn/media/task/attachments/fa4c78d25eea4081864918803996e615 1.准备 获得信息 ...
- React(1) --新建项目
搭建React开发环境之前的准备工作 1.必须要安装node.js (注意:安装node.js稳定版本) 2.安装cnpm,用cnpm替代npm npm install -g cnpm --regis ...
- Fabric管理组件的使用
Fabric的官方网站: http://www.fabfile.org 帮助文档: https://fabric-chs.readthedocs.io/zh_CN/chs/tutorial.html ...