一起来学 Flutter 之文本组件、容器组件(一)

本贴最后更新于 1658 天前,其中的信息可能已经沧海桑田

写在前面:
最近新接触到 Flutter 混合开发,开始学习强大的 Flutter,这是第一篇 Flutter 教程。关于 Fluuter,在这里就不多介绍了,网上有很多,不过关于 Flutter 的安装,本人确实踩了不少坑,差点就从安装到放弃了。后面有时间我可以单独出一篇教程讲述 Flutter 的安装过程。
学习 Flutter 之前,一定要告诉自己:Flutter 一切皆组件。本节先认识一下 Flutter 的基本组件:文本组件和容器组件。

1.文本组件(Text Widget)

首先,我们构建一个 Flutter 基本方法:

import 'package:flutter/material.dart';
void main () => runApp(TextApp());

class TextApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
            child:Text('你好 Santa')
          ),
        ),
      );
  }
}

这里的 Text()就是一个文本组件,熟悉 Dart 语言的都知道 new 对象时,new 关键字是可以省略的,所以在后面的学习中,所有对象或者方法的 new 都会被我省略。
关于文本组件的属性,常用的主要有以下几个:

TextAlign 对齐属性

常用属性值:

  • center:文本居中对齐
  • right: 左对齐
  • left:右对齐
  • start:从开始位置对齐
  • end:从结束位置对齐
    具体的对齐效果,大家可以自行试验,下面奉上实例代码
  child:Text('你好 Santa',
		textAlign:TextAlign.center)

maxLines 行数显示属性

 child:Text('你好 Santa',
		textAlign:TextAlign.center,
		maxLines: 2,)

这里 maxLines 值是多少,文本就最多显示多少行。

overflow 属性

当文本较多,而又无法全部显示时,就用到了 overflow 属性
常用属性值:

  • clip:直接去掉多余的。
  • ellipsis:多余的用...表示。
  • fade: 多余的用渐变表示,但是效果太丑,个人不太喜欢。
 child:Text('你好 Santa',
		textAlign:TextAlign.center,
		maxLines: 2,
		overflow: TextOverflow.ellipsis,)

style 属性

这里的 style 属性就类似于 CSS 中的 style 属性,主要是一些字体的美化功能,属性较多,大家可以自行体验,但是需要注意一点的是,这里的 style 对应的不再是值,而是需要新给一个 textStyle 组件,在组件中给定各种属性,这也是 Flutter 的一个特点吧,就是组件里面套组件:

 child:Text('你好 Santa',
		textAlign:TextAlign.center,
		maxLines: 2,
		overflow: TextOverflow.ellipsis,
		style: TextStyle(  
 			fontSize:25.0,  
 			color:Color.fromARGB(255, 255, 255, 255),  
 			decoration:TextDecoration.underline,  
 			decorationStyle:TextDecorationStyle.solid,  
 ),)

以上就是 Flutter 文本组件的一些常用属性和常规用法。

2.容器组件

容器组件就有点类似与 HTML 中的

标签和标签,可以用来分割界面,将其他组件放入指定容器中:
首先,看下容器组件的基本写法:

import 'package:flutter/material.dart';
void main () => runApp(containerApp());

class containerApp extends StatelessWidget{
  @override
  Widget build(BuildContext context ){
      return MaterialApp(
        title:'Text widget',
        home:Scaffold(
          body:Center(
	//在页面中放入一个容器组件,再向容器组件中放入一个文本组件
           child:Container(
             child:Text('你好 Santa',),
           ),
          ),
        ),
      );
  }
}

Alignment 属性

注意,该属性主要针对容器组件的子组件,而不是容器组件本身的布局属性也就是只对 child 下的组件生效。

  • bottomCenter:下部居中对齐。
  • botomLeft: 下部左对齐。
  • bottomRight:下部右对齐。
  • center:纵横双向居中对齐。
  • centerLeft:纵向居中横向居左对齐。
  • centerRight:纵向居中横向居右对齐。
  • topLeft:顶部左侧对齐。
  • topCenter:顶部居中对齐。
  • topRight: 顶部居左对齐。
 child:Container(
             child:Text('你好 Santa',),
 		alignment: Alignment.center,)

同时,还可以设置容器的大小,颜色等属性

child:Container(
             child:Text('你好 Santa',),
 		alignment: Alignment.center,
 		 width:300.0,
  		height:300.0,
  		color: Colors.lightBlue,)

另外,容器还具有边距属性,padding 和 margin,与 CSS 中的定义一样,padding 是容器和 child 子组件之间的距离,而 margin 则是容器和其外部组件之间的距离。

child:Container(
             child:Text('你好 Santa',),
 		alignment: Alignment.center,
 		 width:300.0,
  		height:300.0,
  		color: Colors.lightBlue,
		//需要注意一点的是,两个属性值需要new一个新的常量来对应属性值
		//Flutter中,组件的属性值通常是double类型,而不是int,所以10应该写成10.0
		 padding:const EdgeInsets.fromLTRB(20.0,20.0,10.0,10.0),  
		 margin: const EdgeInsets.all(10.0),)

decoration 属性

decoration 是 container 的修饰器,主要的功能是设置背景和边框。
比如我们现在要给容器加一个渐变的背景色,则:

        child: Container(
              child: Text("你好 Santa"),
              width:500.0,
              height:400.0,
              decoration:new BoxDecoration(
                  gradient:const LinearGradient(
                      colors:[Colors.lightBlue,Colors.blue,Colors.blueAccent]
                  )
              ),
            ),

image.png

但是需要注意的是,此处的 decoration 属性会 colors 属性冲突,二者取其一。

border 边框属性

可以通过 border 属性,为容器设置边框属性

border:Border.all(width:2.0,color:Colors.red)

以上就是 Flutter 的文本组件和容器组件,第一次写 Flutter 技术文章,如有错误,请指正,谢谢!

  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 8 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...