android 什么是SkSL和“Shader Jank Compilation”在Flutter中的所有内容？

问题：

所以，我建立了一个登录屏幕和该页面的启动时间吸！在我看了文档，然后我发现了一个叫做Shader Jank Complation的东西，我发现文档令人困惑，但决定实现there。

完成步骤后我运行了应用程序，性能大幅提升。但是，我不知道后台发生了什么，文档实际上指向了什么。

我也不明白代码出了什么问题，应用程序没有按照预期运行或无缘无故地滞后。

代码：

登录屏幕：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:regexed_validator/regexed_validator.dart';

import '../constants/buttons.dart';
import '../constants/colors.dart';
import '../constants/text_style.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

  String email = "";
  String password = "";

  final formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: SizedBox(
          width: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text(
                "Login",
                textAlign: TextAlign.center,
                style: MyTextStyle.headingTextWelcomeScreen,
              ),
              const SizedBox(
                height: 10,
              ),
              Text(
                "Enter your email and password.",
                textAlign: TextAlign.center,
                style: MyTextStyle.defaultText,
              ),
              const SizedBox(
                height: 30,
              ),
              Form(
                  key: formKey,
                  child: Column(
                    children: [
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: TextFormField(
                          inputFormatters: [
                            FilteringTextInputFormatter.deny(' ')
                          ],
                          keyboardType: TextInputType.emailAddress,
                          cursorColor: MyColors.blue,
                          style: MyTextStyle.defaultBlackText,
                          decoration: InputDecoration(
                            prefixIcon: Icon(
                              Icons.email_outlined,
                              color: MyColors.blue,
                            ),
                            label: Text(
                              "Email",
                              style: MyTextStyle.defaultBlueText,
                            ),
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: MyColors.blue,
                                width: 2,
                              ),
                              borderRadius: const BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(
                                color: MyColors.blue,
                                width: 2,
                              ),
                              borderRadius: const BorderRadius.all(
                                Radius.circular(10),
                              ),
                            ),
                          ),
                          onChanged: (value) {
                            email = value;
                          },
                          validator: (value) {
                            if (validator.email(value!)) {
                              return null;
                            } else {
                              return 'Invalid Email';
                            }
                          },
                        ),
                      ),
                      const SizedBox(
                        height: 10,
                      ),
                      SizedBox(
                        width: MediaQuery.of(context).size.width * 0.7,
                        child: TextFormField(
                          inputFormatters: [
                            FilteringTextInputFormatter.deny(' ')
                          ],
                          obscureText: true,
                          keyboardType: TextInputType.visiblePassword,
                          cursorColor: MyColors.blue,
                          style: MyTextStyle.defaultBlackText,
                          decoration: InputDecoration(
                              prefixIcon: Icon(
                                Icons.password_outlined,
                                color: MyColors.blue,
                              ),
                              label: Text("Password",
                                  style: MyTextStyle.defaultBlueText),
                              enabledBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: MyColors.blue,
                                  width: 2,
                                ),
                                borderRadius: const BorderRadius.all(
                                  Radius.circular(10),
                                ),
                              ),
                              focusedBorder: OutlineInputBorder(
                                borderSide: BorderSide(
                                  color: MyColors.blue,
                                  width: 2,
                                ),
                                borderRadius: const BorderRadius.all(
                                  Radius.circular(10),
                                ),
                              ),
                              errorStyle: MyTextStyle.defaultRedText
                                  .copyWith(fontSize: 12),
                              errorMaxLines: 2),
                          onChanged: (value) {
                            password = value;
                          },
                          validator: (value) {
                            if (validator.password(value!)) {
                              return null;
                            } else {
                              if (password.length < 8) {
                                return 'Invalid Password: Must be grater than 7 characters';
                              } else {
                                return 'Invalid Password: Missing one of the characters @, Captial Letter, Number.';
                              }
                            }
                          },
                        ),
                      ),
                    ],
                  )),
              const SizedBox(
                height: 15,
              ),
              SizedBox(
                height: 45,
                width: MediaQuery.of(context).size.width * 0.7,
                child: DefaultButton(
                  buttonText: "Login",
                  vdc: () {
                    formKey.currentState!.validate();
                  },
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

欢迎界面：

import 'package:attendance_management_system_firebase/pages/reg_page.dart';
import 'package:flutter/material.dart';

import '../constants/buttons.dart';
import '../constants/text_style.dart';
import 'login_page.dart';

class WelcomePage extends StatefulWidget {
  static const String id = "welcome_sc";
  const WelcomePage({super.key});

  @override
  State<WelcomePage> createState() => _WelcomePageState();
}

class _WelcomePageState extends State<WelcomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
          child: Center(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
          child: SingleChildScrollView(
            child: Column(
              children: [
                Image.asset(
                  "assets/welcome.png",
                  width: MediaQuery.of(context).size.width * 0.65,
                ),
                const SizedBox(
                  height: 35,
                ),
                Text(
                  "Welcome",
                  textAlign: TextAlign.center,
                  style: MyTextStyle.headingTextWelcomeScreen,
                ),
                Text(
                  "Let's get you started with taking attendance!",
                  textAlign: TextAlign.center,
                  style: MyTextStyle.defaultText,
                ),
                const SizedBox(
                  height: 20,
                ),
                SizedBox(
                  height: 45,
                  width: MediaQuery.of(context).size.width * 0.7,
                  child: DefaultButton(
                    buttonText: "Login",
                    vdc: () {
                      Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const LoginPage()));
                    },
                  ),
                ),
                const SizedBox(
                  height: 5,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "Don't have an account? ",
                      style: MyTextStyle.defaultBlueText,
                    ),
                    InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const RegisterPage(),
                          ),
                        );
                      },
                      child: Text(
                        "Register",
                        style: MyTextStyle.defaultBlueText.copyWith(
                            fontWeight: FontWeight.w600,
                            decoration: TextDecoration.underline),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      )),
    );
  }
}

main.dart

import 'package:attendance_management_system_firebase/pages/welcome_page.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WelcomePage(),
    );
  }
}

您的应用没有问题，大多数应用一开始都有shader compilation jank。Skia渲染引擎下的Flutter，这个GPU引擎在应用第一次打开时会生成shader。
着色器是给GPU在屏幕上绘制UI的底层代码当一个应用第一次启动的时候，应用中是没有着色器的，所以，当应用启动的时候，要呈现一个流畅的UI一个帧应该在16 ms内渲染。着色器帮助重复执行一系列命令。可以把它看作是一个组件小部件，我们在高-级别的语言来清理我们的重复代码。着色器和Widget的工作原理相似，但着色器是更底层的代码。所以，回到主题，当我们第一次打开应用程序时，Skia有时会在第一次运行应用程序时编译并生成着色器，以尽可能快地使用相同的绘制命令呈现下一帧，而无需一次又一次地生成帧。
着色器的生成需要相当多的时间（根据情况大约200 ms或更长时间），这会导致无法在16 ms内渲染的帧发生jank。此jank称为shader-compilation-jank。

Flutter开发人员正在开发一个名为Impeller的新图形引擎。这将解决这个问题，但它仍在开发中。因此，为了暂时解决这个问题，我们预编译这些着色器并将它们与应用程序捆绑在一起。
所以，你所做的步骤是当你在配置文件模式下运行你的应用时，skia生成这些着色器，然后将其保存在一个文件中。这些着色器与应用预先捆绑在一起，这样skia就不必再次编译和生成这些着色器。
希望没什么事。

android 什么是SkSL和“Shader Jank Compilation”在Flutter中的所有内容？

问题：

代码：

1条答案

相关问题

热门标签

最新问答