小菜鸡开始学习flutter之十八

你太有才了
59 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

今日目标

昨天我们简单的编写了一些代码，了解了一些基本内容，今天我们来详细学习下Container和Text组件

首先来准备并回顾下我们的基础结构

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: const Text('你太有才了-Flutter'),
        ),
        body: const Text('基础框架'),
    ));
  }
}

在后面的学习当中，我们都以这个结构作为基础形式，我们要修改的东西都在body里面。
运行命令flutter run来看下基本效果吧，要注意检查你的模拟器是否连接正常。这里我们还是继续采用夜神模拟器,关于连接模拟器的一些小问题，大家可以翻翻前面的文章。

image.png

接下来就通过实际的代码来详细的讲解下container和text

首先我们将body对应的内容抽离出来，在以后的项目中我们也建议尽量将你的内容都抽离成单独的组件，便于维护，不然看起来就像套娃的形式，难以读懂和维护。
我们自定义一个HomeContent组件

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('你太有才了'),
    );
  }
}

自定义好HomeContent后我们需要实现里面的抽象方法，这里建议直接通过vscode的代码补全直接写出来，避免手动编写而忘记，当然了在初期学习的时候还是建议大家手动写，加深印象。

Container

container是一个容器组件有点类似于前端小伙伴们使用的div标签 我们将上面的text替换成container

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text('你太有才了'),
      ),
    );
  }
}

这个时候我们在模拟器上看到如下的效果

image.png 包含的属性有：

属性功能
alignmenttopCenter: 顶部居中对齐
topLeft:顶部靠左对齐
topRight: 顶部靠右对齐
center: 水平垂直居中对齐
centerLeft: 垂直居中水平居左对齐
cetnerRight: 垂直居中水平居右对齐
bottomCenter: 底部居中对齐
bottomLeft: 底部居左对齐
bottomRight: 底部居右对齐
height容器高度 double类型
width容器宽度 double类型
decorationBoxDecoration(
color: Colors.blue,
border: Border.all(
color: Colors.red,
width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(8.0))
) 可以设置背景颜色，边框的一些属性
margin表示 Container与外部其他组件的距离 EdgeInsets.all(20.0)
paddingContainer的内边距， EdgeInsets.all(20.0)
transform让Container容易进行一些旋转之类的操作

Text

包含的属性有:

属性功能
textAlign文本对齐方式
cetner:居中
left: 左对齐
right： 右对齐
justify：两端对齐
textDirection文本方向
ltr: 从左到右
rtl: 从右到左
overflow文本超出屏幕之后的处理形式
clip:裁剪
fade：渐隐
ellipsis：省略号
textScaleFactor字体显示倍率
maxLines文字显示最大行数
style字体的样式设置 TextStyle
textStyle里的一些配置功能
decoration文字装饰线（none: 无，lineThrough:删除线，overline:上划线，underline:下划线）
decorationColor文字装饰线颜色
decorationStyle文字装饰线风格（dashed: 虚线，dotted:点线，double:两根线，solid:实线，wavy:波浪线）
wordSpacing单词间隙（如果是负值，会让单词间更紧凑）
letterSpacing字母间隙（如果是负值，会让字母间更紧凑）
color文字颜色
fontStyle文字样式（italic：斜体，normal:正常）
fontSize文字大小
fontWeight字体粗细（bold粗体，normal正常）

对应的我们需要记住属性名就好了，具体如何实现可以通过vscode的代码提示或者直接按住ctrl+鼠标左键点击属性名进去查看就好了。

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: const Text('你太有才了-Flutter'),
      ),
      body: HomeContent(),
    ));
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Text(
          '你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了你太有才了',
          textAlign: TextAlign.right,
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
          textScaleFactor: 2,
          style: TextStyle(
            fontSize: 20.0,
            color: Color.fromRGBO(255, 213, 23, 1),
            fontWeight: FontWeight.w800,
            fontStyle: FontStyle.italic,
            decoration: TextDecoration.lineThrough,
            decorationColor: Colors.black,
            decorationStyle: TextDecorationStyle.dashed,
            letterSpacing: 5.0
          ),
          ),
        width: 300.0,
        height: 300.0,
        padding: EdgeInsets.all(10.0),
        margin: EdgeInsets.fromLTRB(20, 10, 30, 10),
        decoration: BoxDecoration(
          color: Colors.red, // 背景颜色
          border: Border.all(
            color: Colors.blue,
            width: 3.0
          ), 
          borderRadius: BorderRadius.all(
            Radius.circular(30.0)
          )
        ),
        transform: Matrix4.rotationZ(0.3),
        alignment: Alignment.bottomRight,
      ),
    );
  }
}

image.png 对上述属性做一些简单的使用，就可以得到如图所示的效果，Container和Text算是使用最频繁的几个组件之一了，大家需要熟练掌握哦~~

ending

持续学习,加油，如有不对的地方还请指正，谢谢~~

avatar
文章
阅读
粉丝