So verwenden Sie 9-Patch-Bilder in Flutter

Ein 9-Patch-Bild ist eine spezielle PNG-Bilddatei, die es Entwicklern ermöglicht, bestimmte Bereiche eines Bildes beim Strecken unverzerrt zu halten, um Bildverzerrungen zu vermeiden. Dies ist sehr nützlich beim Erstellen skalierbarer UI-Elemente wie Button-Hintergründe, Fortschrittsbalken usw. Obwohl Flutter selbst das native Format von 9-Patch-Bildern nicht direkt unterstützt, können wir mit einigen Tricks einen ähnlichen Effekt erzielen.

Erstellen von 9-Patch-Bildern mit dem 9 Patch Editor

Zunächst benötigen Sie ein PNG-Bild. Verwenden Sie dann das 9 Patch Editor Tool, um Ihr 9-Patch-Bild zu erstellen. Mit diesem Tool können Sie die streckbaren Bereiche und die Inhaltsbereiche des Bildes festlegen. Die konkreten Schritte sind wie folgt:

1. Gehen Sie zur Website des 9 Patch Editors.
2. Laden Sie Ihr PNG-Bild hoch.
3. Wählen Sie mit dem Editor des Tools die streckbaren Bereiche des Bildes aus (ziehen Sie die linke und obere Kante des Bildes).
4. Wählen Sie die Inhaltsbereiche des Bildes aus (ziehen Sie die rechte und untere Kante des Bildes, diese Bereiche bleiben beim Strecken unverändert).
5. Laden Sie das generierte 9-Patch-Bild herunter (laden Sie je nach Bedarf unterschiedliche Bilder herunter).

Verwenden von 9-Patch-Bildern in Flutter

Flutter hat keinen direkten Mechanismus zum Laden von 9-Patch-Bildern. Wir müssen uns Drittanbieterbibliotheken zu Hilfe nehmen oder die Image.centerSlice-Eigenschaft von Flutter verwenden, um den Effekt von 9-Patch-Bildern zu simulieren.

Methode 1: Verwenden von Drittanbieterbibliotheken

Es gibt derzeit einige Drittanbieterbibliotheken für Flutter, die Ihnen beim Laden und Rendern von 9-Patch-Bildern helfen können, wie z. B. ninepatch_image und nine_patch.

Verwenden der ninepatch_image-Bibliothek

Sie müssen die Abhängigkeit in Ihrer pubspec.yaml-Datei hinzufügen:

dependencies:
  ninepatch_image: ^0.0.4

Platzieren Sie das PNG-Bild im Ordner assets Ihres Flutter-Projekts und deklarieren Sie es in der pubspec.yaml-Datei:

flutter:
  assets:
    - assets/my_image.9.png

Anschließend können Sie das NinePatchImage-Widget verwenden, um Ihr 9-Patch-Bild anzuzeigen:

NinePatchImage(
  imageProvider: AssetImage("assets/my_image.9.png"),
  child: Text( "Lorem Ipsum ist einfach ein Blindtext der Druckindustrie"))

Ausführliche Informationen zur Verwendung finden Sie in der Dokumentation zu ninepatch_image.

Verwenden der nine_patch-Bibliothek

Sie müssen die Abhängigkeit in Ihrer pubspec.yaml-Datei hinzufügen:

dependencies:
  nine_patch: ^1.0.0

Sie müssen im Ordner assets eine JSON-Datei erstellen, in der die 9-Patch-Bildinformationen gespeichert sind, und das Originalbild im Ordner assets platzieren.

{
  "stretch": {
    "x": 118,
    "y": 40,
    "width": 121,
    "height": 60
  },
  "contents": {
    "x": 19,
    "y": 18,
    "width": 248,
    "height": 101
  },
  "dimensions": {
    "x": 285,
    "y": 167
  },
  "name": "TextBox_Side.png",
  "scale": 2
}

stretch ist der streckbare Bereich des Bildes, contents ist der Inhaltsbereich des Bildes und dimensions sind die Abmessungen des Bildes. Sie können diese Informationen im 9 Patch Editor Tool einsehen oder das Tool nine_patcher verwenden, um diese Informationen zu generieren.

Anschließend können Sie das NinePatchImage-Widget verwenden, um Ihr 9-Patch-Bild anzuzeigen:

import 'package:nine_patch/nine_patch.dart';

...

// Erstellen Sie ein neues NinePatchImage-Widget
NinePatchImage.fromAssetMetadata(
    name: "my_image.9.json",
)

Denken Sie daran, assets/my_image.9.json durch den JSON-Dateipfad Ihres 9-Patch-Bildes zu ersetzen.

Ausführliche Informationen zur Verwendung finden Sie in der Dokumentation zu nine_patch.

Methode 2: Verwenden von Image.centerSlice

Wenn Sie keine Drittanbieterbibliotheken verwenden möchten, können Sie die Image.centerSlice-Eigenschaft von Flutter verwenden, um den Effekt von 9-Patch-Bildern zu simulieren. Sie müssen die streckbaren Bereiche des Bildes manuell angeben:

Image.asset(
  'assets/my_image.png',
  width: 200,
  height: 100,
  centerSlice: Rect.fromLTWH(20, 20, 160, 60), // Manuelles Angeben des streckbaren Bereichs
),

Hinweis: Verwenden Sie für das Bild das Originalbild oder das kompilierte Bild.

Sie müssen die Werte der centerSlice-Eigenschaft manuell an Ihr Bild anpassen. Sie können diese Informationen im 9 Patch Editor Tool einsehen.

Zusammenfassung

Obwohl Flutter 9-Patch-Bilder nicht direkt unterstützt, können wir durch die Verwendung von Drittanbieterbibliotheken oder der Image.centerSlice-Eigenschaft einen ähnlichen Effekt erzielen. Es wird empfohlen, die ninepatch_image-Bibliothek zu verwenden, da sie einfacher zu bedienen ist. Wenn Sie flexiblere und leistungsfähigere Funktionen benötigen, können Sie die Verwendung von nine_patch in Betracht ziehen. Wenn Sie keine Drittanbieterbibliotheken einbinden möchten, können Sie die Image.centerSlice-Methode verwenden, aber die Funktionalität ist begrenzt und Sie müssen die streckbaren Bereiche manuell angeben. Welche Methode Sie wählen, hängt von Ihren spezifischen Anforderungen und der Komplexität Ihres Projekts ab.