Flutter Container 组件、Text 组件
首页> 学海无涯> Web前端> Flutter Container 组件、Text 组件
Flutter Container 组件、Text 组件
摘要 Flutter Container 组件、Text 组件
一、Flutter Text 组件

名称 功能 
 textAlign
 文本对齐方式(center 居中,left 左
对齐,right 右对齐,justfy 两端对齐)
 textDirection
 文本方向(ltr 从左至右,rtl 从右至
左)
 overflow
 文字超出屏幕之后的处理方式(clip
裁剪,fade 渐隐,ellipsis 省略号)
 textScaleFactor 字体显示倍率 
 maxLines 文字显示最大行数
 style 字体的样式设置 


 下面是 TextStyle 的参数 :
  名称 功能    
 letterSpacing
 文字装饰线(none 没有线,lineThrough 删
除线,overline 上划线,underline 下划线)
 decorationColor 文字装饰线颜色 
 decorationStyle
 文字装饰线风格([dashed,dotted]虚线,
double 两根线,solid 一根实线,wavy 波浪
线)
 wordSpacing
 单词间隙(如果是负值,会让单词变得更紧
 letterSpacing
 字母间隙(如果是负值,会让字母变得更紧
凑)
 fontStyle 文字样式(italic 斜体,normal 正常体)
 fontSize 文字大小 
 color 文字颜色 
 fontWeight 字体粗细(bold 粗体,normal 正常体) 
 

二、Flutter Container 组件

名称 功能 
 alignment
topCenter:顶部居中对齐
topLeft:顶部左对齐
topRight:顶部右对齐
center:水平垂直居中对齐
centerLeft:垂直居中水平居左对齐
centerRight:垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft:底部居左对齐
bottomRight:底部居右对齐
 decoration
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.red,
width: 2.0,
),
borderRadius:
BorderRadius.all(
Radius.circular(8.0)
)
margin 
margin 属性是表示 Container 与外部其他
组件的距离。
EdgeInsets.all(20.0) 
 padding
padding 就 是 Container 的 内 边 距 , 指
Container 边缘与 Child 之间的距离
padding: EdgeInsets.all(10.0) 
 transformContainer 容易进行一些旋转之类的 transform: Matrix4.rotationZ(0.2) 
 height容器高度 
 width容器宽度 
 child 容器子元素 




三 、实例代码

import 'package:flutter/material.dart';

class Custom_Container extends StatelessWidget {
@override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: Scaffold( appBar: AppBar(title: Text("flutter demo")), body: HomeContent())); } } class HomeContent extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Center( child: Container( child: 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, ), ); } }


 

版权声明:本文由Contione原创出品,转载请注明出处!

本文链接:https://contione.cn/article/detail/5

本文配乐
来说两句吧
最新评论
  • 不想知道!
    不想知道!
    后续继续深入下单例的认识