当前位置：首页 > news >正文

Flutter学习笔记(七)---主题

news 2025/8/24 9:04:49

Theme

视频课里面很多主题设置已经不起作用了，需要注意

在这里插入图片描述

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';void main(){//调用runApp函数runApp(MyApp());
}class MyApp extends StatelessWidget{@overrideWidget build(BuildContext context) {return MaterialApp(//保持整个app是Material风格title: "主题演示",debugShowCheckedModeBanner: false,//去掉右上角的debugtheme: ThemeData(// 亮度brightness: Brightness.light,primarySwatch: Colors.red,// 明确设置 primaryColorprimaryColor: Colors.green,// 统一textButtonTheme的一些配置textButtonTheme: TextButtonThemeData(style: ButtonStyle(minimumSize: MaterialStateProperty.all(Size(10, 100)),backgroundColor: MaterialStateProperty.all(Colors.greenAccent))),// 统一Card的一些配置cardTheme: CardTheme(color: Colors.yellow),// // 设置 AppBar 主题// appBarTheme: AppBarTheme(//   backgroundColor: Colors.red,//   foregroundColor: Colors.white,// ),// 设置 FloatingActionButton 主题floatingActionButtonTheme: FloatingActionButtonThemeData(backgroundColor: Colors.red,foregroundColor: Colors.white,),),//暗黑模式darkTheme: ThemeData(cardTheme: CardTheme(color: Colors.grey),),home: YZHomePage());}
}class YZHomePage extends StatelessWidget
{@overrideWidget build(BuildContext context) {return Scaffold(//脚手架appBar: AppBar(title: Text("Theme Study"),),body: YZContentBody(),bottomNavigationBar: BottomNavigationBar(items: [BottomNavigationBarItem(label: "首页",icon: Icon(Icons.home)),BottomNavigationBarItem(label: "我的",icon: Icon(Icons.person))],),floatingActionButton: FloatingActionButton(child: Icon(Icons.add),onPressed: (){print("object");}),);}
}class YZContentBody extends StatelessWidget{@overrideWidget build(BuildContext context) {// 获取主题颜色final theme = Theme.of(context);return Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Text("Hello World",textDirection: TextDirection.ltr,//从左到右style: TextStyle(fontSize: 24,color: Colors.deepOrange)),Switch(value: true, onChanged: (value){print("Switch changed: $value");}),/// iOS系统的样式CupertinoSwitch(value: true, onChanged: (value){}),TextButton(onPressed: (){Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return YZHomeDetailPage();}));},child: Text("c"),// style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.yellow)),),Card(child: Text("这是一个Card"),)],));}
}class YZHomeDetailPage extends StatelessWidget {const YZHomeDetailPage({super.key});@overrideWidget build(BuildContext context) {return Theme(// 重新搞一个ThemeData// data: ThemeData(//   // 自己的ThemeData，以及CardTheme//   cardTheme: CardTheme(//       color: Colors.redAccent//   ),// ),data: Theme.of(context).copyWith(cardTheme: CardTheme(color: Colors.purple)),child: Scaffold(appBar: AppBar(backgroundColor: Colors.green,),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [Card(child: Text("1222222222"),),TextButton(onPressed: (){}, child: Text("123"))],),),),);}
}

屏幕适配

import 'dart:ui';import 'package:flutter/material.dart';class YZScreenSizefit {static double? physicalWidth;static double? physicalHeight;static double? screenWidth;static double? screenHeight;static double? statusHeight;static double? rpx;static double? px;/// 初始化static void initialize({ double standardSize = 750 }) {/// 手机的物理分辨率physicalWidth = window.physicalSize.width;physicalHeight = window.physicalSize.height;print("分辨率：$physicalWidth * $physicalHeight");// 获取dprfinal dpr = window.devicePixelRatio;// 手机屏幕的大小screenWidth = physicalWidth! / dpr;screenHeight = physicalHeight! / dpr;print("手机屏幕大小：$screenWidth * $screenHeight");statusHeight = window.padding.top / dpr;print("状态栏的高度：$statusHeight");// 计算rpx的大小rpx = screenWidth! / standardSize;px = screenWidth! / standardSize * 2;}static double setRpx(double size) {return rpx! * size;}static double setPx(double size) {return px! * size;}
}

Extension

在这里插入图片描述

import '/YZScreenSizeFit.dart';extension DoubleFit on double {double px() {return YZScreenSizefit.setPx(this);}// 使用get方法。用的时候，不需要写()double get getPx {return YZScreenSizefit.setPx(this);}
}

美食广场项目

美食广场Git地址
在这里插入图片描述

使用终端创建flutter项目：
cd 到文件地址
flutter create name

修改id、图标、背景图等操作，在第18节视频课，23分钟开始

修改android的id：
修改安卓的ID

修改android的app名字：
在这里插入图片描述

将json转换成dart的model的网站：
json_to_dart

加载Json，并将Json转换成Model

import 'dart:convert';
import 'package:flutter/services.dart';
import 'package:theme2/core/model/category_model.dart';class JsonParse {static Future<List<YZCategoryModel>> getCategoryData() async{//1. 加载JSON文件final jsonString = await rootBundle.loadString("assets/json/home.json");//2. 将jsonString转换成Map或者Listfinal result = json.decode(jsonString);//将其他格式转换成jsonString// json.encoder()//3. 将Map中的内容转成一个个对象final resultList = result["category"];//获取到的是数组List<YZCategoryModel> categoryList = [];for (var json in resultList){categoryList.add(YZCategoryModel.fromJson(json));}return categoryList;}
}