Flutter Container组件、Text组件详解

发布于 2021-07-12  1 次阅读


Flutter Text 组件

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

style中TextStyle 的参数

名称类型功能
decorationTextDecoration文字装饰线(none 没有线,lineThrough 删除线,overline 上划线,underline 下划线)
decorationColorColors文字装饰线颜色
decorationStyleTextDecorationStyle文字装饰线风格([dashed,dotted]虚线,double 两根线,solid 一根实线,wavy 波浪线)
wordSpacingdouble单词间隙(如果是负值,会让单词变得更紧凑)
letterSpacingdouble字母间隙(如果是负值,会让字母变得更紧凑)
fontStyleFontStyle文字样式(italic 斜体,normal 正常体)
fontSizedouble文字大小
colorColors文字颜色
fontWeightFontWeight字体粗细(bold 粗体,normal 正常体)

Flutter Container 组件

名称类型功能
alignmentAlignmenttopCenter:顶部居中对齐
topLeft:顶部左对齐
topRight:顶部右对齐
center:水平垂直居中对齐
centerLeft:垂直居中水平居左对齐
centerRight:垂直居中水平居右对齐
bottomCenter 底部居中对齐
bottomLeft:底部居左对齐
bottomRight:底部居右对齐
decorationBoxDecoration背景装饰
marginEdgeInsetsmargin 属性是表示 Container 与外部其他组件的距离。
paddingEdgeInsetspadding 就是 Container 的内边距 ,指Container 边缘与 Child 之间的距离
transformMatrix4让 Container 容易进行一些旋转之类的
heightdouble容器高度
widthdouble容器宽度
child容器子元素

Demo

import 'package:flutter/material.dart';
import 'package:myapp/demo/demo.dart';

void main() => runApp(MyApp());

class MyApp 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) {
    return Center(
      // child: Text('hello flutter'),
      child: Container(
        child: Text(
          '这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话这是一段很长的话',
          textAlign: TextAlign.left,
          textDirection: TextDirection.ltr,
          overflow: TextOverflow.ellipsis,
          //一行文本溢出后以 ... 显示
          maxLines: 1,
          //文本最大显示几行
          textScaleFactor: 1.2,
          //文本显示倍率
          style: TextStyle(
            fontSize: 16.0,
            color: Colors.teal,
            fontWeight: FontWeight.w800, //文本加粗
            fontStyle: FontStyle.italic, //字体样式,italic斜体
            decoration: TextDecoration.lineThrough, //文本中有线穿过的效果
            decorationColor: Colors.white, //穿过的线的颜色
            decorationStyle: TextDecorationStyle.dashed, //穿过的线的样式,dashed为虚线
            letterSpacing: 5.0, //字间距设置
          ),
        ),
        height: 300.0,
        width: 300.0,
        decoration: BoxDecoration(
          color: Colors.tealAccent,
          border: Border.all(
            color: Colors.blue,
            width: 2.0,
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10),
          ), //边框圆角
        ),
        //padding: EdgeInsets.all(20), //内边距,四边文本与框的距离
        padding: EdgeInsets.fromLTRB(10, 30, 10, 10), //四边距离,左 上 右 下
        margin: EdgeInsets.fromLTRB(10, 30, 10, 10), //内边距

        //transform: Matrix4.translationValues(100, 0, 0), //框的位移
        //transform: Matrix4.rotationZ(0.3), //框的旋转
        //transform: Matrix4.diagonal3Values(1.2, 1, 1),//框的缩放

        //alignment: Alignment.bottomLeft, //居于底部左侧
        alignment: Alignment.topLeft, //居于顶部左侧
      ),
    );
  }
}

运行界面

20210712205708731

平平无奇的在校大学生