Flutter第二讲，定义Widget和文字样式

最新推荐文章于 2024-04-03 01:31:18 发布

lizhaobomb

最新推荐文章于 2024-04-03 01:31:18 发布

阅读量185

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/lizhaobomb/article/details/105260157

版权

Flutter 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

首先我们来了解下什么Widget，其实就是相当于iOS开发中的UIView,在dart中Widget分为两大类

StatefulWidget (有状态Widget）

状态是在构建widget时可以同步读取的信息，或者在widget的生命周期中可能更改的信息，在Flutter中如果要管理状态需要用到 StatefulWidget。

StatelessWidget（无状态Widget）

Flutter中的StatelessWidget是一个不需要状态更改的widget - 它没有要管理的内部状态。

以上我们先简单介绍下Widget,后面我们用到再详细讲，下面我们来看看如何定义一个Widget，我们还是用上次的demo的里的代码，把Text Widget抽取出来定义成MyWidget

class MyWidget extends StatelessWidget {
  
}

那如何把我们的Widget渲染到页面上呢，其实有个build方法，build方法return什么就会渲染什么，我们来写下build方法

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text('Hello Flutter', textDirection: TextDirection.ltr,)
    );
  }
}

然后我们把main函数里改下

void main(){
  runApp(
   MyWidget()
  );
}

运行下跟我们之前的效果是一样的

最后我们说下dart的一个语法，当一个函数只有一行代码执行的时候，可以去掉大括号然后改成箭头,最后我们精简完就是下面这个样子

void main() => runApp(MyWidget());

文字样式

接下来我们来研究先Text这个Widget，我们点击去Text类里查看下

const Text(
    this.data, {
    Key key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
  })

const Text()是个构造函数，里面的this.XXXX都是属性而且是可选的，我们看见它有个style属性，我们来设置下看看

import 'package:flutter/material.dart';

void main() => runApp(MyWidget());

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(
      'Hello Flutter',
      textDirection: TextDirection.ltr,
          style: TextStyle(color: Colors.red, fontSize: 40, fontWeight: FontWeight.bold),
    ));
  }
}

我们保存下代码直接热重装看看效果

我们把代码整理下,style抽出来

import 'package:flutter/material.dart';

void main() => runApp(MyWidget());

class MyWidget extends StatelessWidget {
  @override
  final _textStyle = TextStyle(
      color: Colors.red,
      fontSize: 40,
      fontWeight: FontWeight.bold
  );

  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
        child: Text(
      'Hello Flutter',
      textDirection: TextDirection.ltr,
      style: _textStyle,
    ));
  }
}