Flutter的Container组件与Text组件详解

2019/7/25 10:02:56 人评论 次浏览 分类:Flutter                 进angular qq群大神亲自指导     angular交流群②

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

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

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

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容器的底部左侧)
      ),
    );
  }
  
}


本文链接 http://www.ngui.cc/news/show-14954.html

教程有问题或不明白可以在评论区评论站长会用心修改的

相关资讯

    暂无相关的资讯...