Flattertext ändert seine Größe nicht entsprechend den Systemeinstellungen [umfassendste Regelung]

Text ändert seine Größe nicht mit den Systemeinstellungen [1]

Vorwort

Vorwort

Fügen Sie hier eine Bildbeschreibung ein

Bei der zunehmenden Plattformanpassung von Flutter besteht das häufigste Szenario darin, dass die Schriftgröße oder der Stil des Geräts geändert wird, was zu einer Anpassungsverformung der gesamten APP führt. Die Lösung für dieses Problem ist natürlich Es schränkt die ein Schriftarten, aber wenn Sie es verallgemeinern, ist es nicht geeignet. Schließlich kümmert sich das Produkt nicht um Ihre Unannehmlichkeiten. Hier habe ich die meisten Szenario-Nutzungspläne zusammengestellt.

Option 1: MediaQuery verwenden

Verwenden SieMediaQuery, um den Textskalierungsfaktor des Geräts abzurufen und ihn auf den Textstil anzuwenden.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;

    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
          style: TextStyle(
            fontSize: 16.0, // 设置一个基础的字体大小
            textScaleFactor: 1.0 / textScaleFactor,
          ),
        ),
      ),
    );
  }
}

Option 2: Text-Widget anpassen

Erstellen Sie ein benutzerdefiniertes WidgetNonScalingText, das die Anpassung des Textskalierungsfaktors intern übernimmt.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: NonScalingText(
          'This text will not scale with system font size',
        ),
      ),
    );
  }
}

class NonScalingText extends StatelessWidget {
    
    
  final String text;

  NonScalingText(this.text);

  @override
  Widget build(BuildContext context) {
    
    
    double textScaleFactor = MediaQuery.of(context).textScaleFactor;
    double adjustedTextScaleFactor = 1.0 / textScaleFactor;

    return Text(
      text,
      style: TextStyle(
        fontSize: 16.0, // 设置一个基础的字体大小
        textScaleFactor: adjustedTextScaleFactor,
      ),
    );
  }
}

Beide Lösungen basieren auf der Einstellung des Attributs textScaleFactor, um sicherzustellen, dass der Text nicht durch Änderungen der Systemschriftgröße beeinträchtigt wird. Sie können je nach Bedarf eine davon oder eine Kombination davon auswählen. Beachten Sie, dass Sie möglicherweise Anpassungen basierend auf den Besonderheiten Ihrer App vornehmen müssen, um bestimmte Design- und Benutzererfahrungsanforderungen zu erfüllen.

Option 3: FittedBox verwenden

Verwenden SieFittedBoxWidget-UmbruchText, um die Textskalierung unabhängig von der Systemschriftgröße beizubehalten.


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Text(
            'This text will not scale with system font size',
            style: TextStyle(
              fontSize: 16.0, // 设置一个基础的字体大小
            ),
          ),
        ),
      ),
    );
  }
}

FittedBoxDas -Widget verwendet das AttributBoxFit.scaleDown, um sicherzustellen, dass der Text bei Bedarf verkleinert wird, um in den übergeordneten Container zu passen, aber nicht skaliert wird, wenn sich die Systemschriftgröße ändert.

Option 4: Verwenden Sie LayoutBuilder

Verwenden SieLayoutBuilder, um die Breite und Höhe des übergeordneten Containers abzurufen und den Textstil basierend auf diesen Informationen anzupassen.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
    
    
            return Text(
              'This text will not scale with system font size',
              style: TextStyle(
                fontSize: 16.0, // 设置一个基础的字体大小
                textScaleFactor: 1.0, // 确保文本不受系统字体大小变化的影响
              ),
            );
          },
        ),
      ),
    );
  }
}

LayoutBuilderErmöglicht Ihnen, die Einschränkungsinformationen des übergeordneten Containers abzurufen. Sie können den Textstil basierend auf diesen Informationen anpassen, um sicherzustellen, dass der Text nicht durch Änderungen der Systemschriftgröße beeinträchtigt wird.

Option 5: Verwenden Sie ein benutzerdefiniertes Design

In Flutter können Sie den Textstil der Anwendung global festlegen, indem Sie das Design anpassen. Durch Festlegen des Attributs in MaterialApp können Sie globale Textstile, einschließlich der Schriftgröße, definieren, um zu vermeiden, dass sie durch Änderungen der Systemschriftgröße beeinträchtigt werden. theme

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText2: TextStyle(
            fontSize: 16.0, // 设置一个基础的字体大小
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
        ),
      ),
    );
  }
}

Durch Festlegen des Stils in TextTheme können Sie den Standardstil für den Haupttext in Ihrer Anwendung definieren. Auf diese Weise bleibt die Schriftgröße des Haupttextes gleich, auch wenn sich die Systemschriftgröße ändert. bodyText2

Option 6: Benutzerdefinierte Schriftarten verwenden

In manchen Fällen möchten Sie möglicherweise eine benutzerdefinierte Schriftart verwenden, um sicherzustellen, dass der Text in Ihrer App nicht durch Änderungen der Systemschriftgröße beeinträchtigt wird. Fügen Sie zunächst die benutzerdefinierte Schriftartdatei zum Flutter-Projekt hinzu und konfigurieren Sie sie dann in pubspec.yaml. Verwenden Sie anschließend benutzerdefinierte Schriftarten überTextStyle.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText2: TextStyle(
            fontFamily: 'CustomFont', // 自定义字体的名称
            fontSize: 16.0, // 设置一个基础的字体大小
          ),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      appBar: AppBar(
        title: Text('Non-Scaling Text'),
      ),
      body: Center(
        child: Text(
          'This text will not scale with system font size',
        ),
      ),
    );
  }
}

Stellen Sie sicher, dass Sie die Schriftartkonfiguration hinzufügen inpubspec.yaml:

flutter:
  fonts:
    - family: CustomFont
      fonts:
        - asset: fonts/CustomFont.ttf

Bei den oben genannten Lösungen handelt es sich um sechs verschiedene Lösungen. Sie können eine davon auswählen oder sie entsprechend den spezifischen Anforderungen Ihrer Anwendung in Kombination verwenden. Jede Option hat ihre Vorteile und anwendbaren Szenarien. Wählen Sie die für Ihre Situation am besten geeignete Methode. Wenn Sie weitere Fragen haben oder weitere Informationen benötigen, wenden Sie sich bitte an uns.

Zusammenfassen

Diese Lösungen bieten eine Vielzahl von Optionen, und Sie können je nach den spezifischen Anforderungen der Anwendung die am besten geeignete Methode auswählen oder je nach Situation verschiedene Lösungen kombinieren. Ich hoffe, diese Lösungen sind hilfreich für Sie. Wenn Sie weitere Fragen haben oder weitere Hilfe benötigen, können Sie uns gerne fragen.