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,
          ),
    );
  }
}