getx 实现全局字体切换

效果

开始

很喜欢一些好看的字体，所以找了一些免费的字体，最近学了getx这个框架就想做一下项目内的字体切换，整体学下来发下getx的使用还是很简单的~。

首先

找一些自己喜欢的字体

把他们通通放在项目下

然后

把项目的资源 和插件getx 在yaml文件中导入

get: ^4.6.5
assets:
  - assets/
  
fonts:
  - family: xingshu #字体名
    fonts:
      - asset: assets/fonts/xingshu.ttf
  - family: summer #字体名
    fonts:
      - asset: assets/fonts/xiachanwanning.ttf
  - family: mo #字体名
    fonts:
      - asset: assets/fonts/sanjipomo.ttf
  - family: long #字体名
    fonts:
      - asset: assets/fonts/longxingshu.ttf
  - family: tian #字体名
    fonts:
      - asset: assets/fonts/homesweet.ttf
  - family: yuan #字体名
    fonts:
      - asset: assets/fonts/LiuJianMaoCao-Regular.ttf

其次

写一个controller 继承 GetxController 来初始化和 管理修改字体

class FontController extends GetxController {

  static final List<String> fonts = [
    'tian',
    'xingshu',
    'summer',
    'mo',
    'long',
    'yuan',
  ];
  Rx<String> selectedFont = Rx<String>(fonts[0]);
  String ownerFont = fonts[0];

  void setFont(String font) {
    selectedFont.value = font;
  }

  void changeFont(String font){
    ownerFont = font;
    update();
  }
} 

然后将这个FontController 从根节点注入 这样全局就可以通过Get.find()使用FontController的属性和方法

使用 getx Obx可以实现 Rx 的数据类型修改自动刷新界面

class SettingFontPage extends StatelessWidget {
  SettingFontPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          elevation: 0,
          centerTitle: true,
          title: Obx(() {
            return Text(
              "选择字体",
              style: TextStyle(color: Theme.of(context).primaryColor, fontFamily: Get.find<FontController>().selectedFont.value),
            );
          })),
      body: Column(
        children: [
          _fontDetails(title: '星爱甜心', fontFamily: 'tian',),
          _fontDetails(title: '行书', fontFamily: 'xingshu',),
          _fontDetails(title: '夏日', fontFamily: 'summer',),
          _fontDetails(title: '飞舞行书', fontFamily: 'long',),
          _fontDetails(title: '圆圆', fontFamily: 'yuan',),
        ],
      ),
    );
  }

  Widget _fontDetails({
    required String title,
    required String fontFamily,
  }) {
    return GestureDetector(
      onTap: () =>  Get.find<FontController>().setFont(fontFamily),
      child: Container(
        margin: const EdgeInsets.only(top: 10,),
        width: double.infinity,
        alignment: Alignment.center,
        padding: const EdgeInsets.all(15),
        decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Color(0xffB4D2FF), Color(0xffcec4ee)],
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
            ),
            borderRadius: BorderRadius.circular(15)),
        child: Text(
          title,
          style: TextStyle(fontFamily: fontFamily, fontSize: fontFamily != "xingshu" ? 20 : 26),
        ),
      ),
    );
  }
}
    

只需要在要用到 Get.find<FontController>().selectedFont.value 时使用Obx

Endding .....