Flutter的Container组件与Text组件详解

首先复习一下Flutter项目的基本结构：

代码语言：javascript复制

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('navTitle'),
        ),
        body: HomeContent(),
      ),
    );
  }
  
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          '这里是内容！~'
        ),
      ),
    );
  }
  
}

接下来我们就以Center为例来讲解一下Container和Text组件。

Text

代码语言：javascript复制

Text(
     '这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~这里是内容！~',
     textAlign: TextAlign.left,//设置文本的对齐方式
     textDirection: TextDirection.ltr,//文本的方向
     style: TextStyle(
            fontSize: 18.0,//字体大小
            color: Colors.red,//文字颜色
            fontWeight: FontWeight.bold,//字体粗细(bold 粗体，normal 正常体)
            fontStyle: FontStyle.italic,//文字样式(italic 斜体，normal 正常体)
            decoration: TextDecoration.lineThrough,//文字装饰线(none 没有线，lineThrough 删 除线，overline 上划线，underline 下划线)
            decorationColor: Colors.brown,//文字装饰线颜色
            decorationStyle: TextDecorationStyle.dashed,//文字装饰线风格([dashed,dotted]虚线， double 两根线，solid 一根实线，wavy 波浪 线)
            letterSpacing: 2.0,//字母间隙(如果是负值，会让字母变得更紧凑)，一般用于中文的文字间隙
            wordSpacing: 2.0,//单词间隙(如果是负值，会让单词变得更紧凑，用于设置英文中的单词与单词的间隙
          ),
     overflow: TextOverflow.ellipsis,//文字超出屏幕之后的处理方式(clip 裁剪，fade 渐隐，ellipsis 省略号)
     maxLines: 3,//文字显示最大行数
     textScaleFactor: 1.0,//设置字体显示倍率
 )

Container

代码语言：javascript复制

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(......),
        height: 200.0,//Container的高度
        width: 200.0,//Container的宽度
        decoration: BoxDecoration(
          color: Colors.yellow,//Container的背景色
          border: Border.all(
            color: Colors.blue,//Container的边框颜色
            width: 10.0,//Container的边框宽度
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(10),//设置Container边框的圆角
          ),
        ),
        padding: EdgeInsets.all(20),//设置Container内边距
        margin: EdgeInsets.fromLTRB(10, 10, 10, 10),//设置Container的外边距
        transform: Matrix4.translationValues(100, 0, 0),//形变效果
        alignment: Alignment.bottomLeft,//配置Container内部的元素的位置（这里表示，child元素位于Container容器的底部左侧）
      ),
    );
  }
  
}

如代码所示。

以上。

flutter text

0 人点赞