it-swarm.com.de

Anpassen der Größe von Elementen an den Prozentsatz der Bildschirmbreite / -höhe

Gibt es eine einfache Möglichkeit (ohne LayoutBuilder), die Größe eines Elements im Verhältnis zur Bildschirmgröße (Breite/Höhe) zu bestimmen? Beispiel: Wie stelle ich die Breite eines CardView auf 65% der Bildschirmbreite ein?.

Dies kann (offensichtlich) nicht innerhalb der build -Methode durchgeführt werden, sodass es bis zum Postbuild zurückgestellt werden müsste. Gibt es einen bevorzugten Ort, um Logik wie diese zu formulieren?

73
Luke

FractionallySizedBox kann auch nützlich sein. Sie können die Bildschirmbreite auch direkt aus MediaQuery.of(context).size ablesen und daraus eine Box in der Größe erstellen

MediaQuery.of(context).size.width * 0.65

wenn Sie die Größe wirklich als Bruchteil des Bildschirms festlegen möchten, unabhängig vom Layout.

64
Ian Hickson

Dies könnte etwas klarer sein:

double width = MediaQuery.of(context).size.width;

double yourWidth = width * 0.65;

Hoffe das hat dein Problem gelöst.

98

Dies ist eine ergänzende Antwort, die die Implementierung einiger der genannten Lösungen zeigt.

FractionallySizedBox

Wenn Sie ein einzelnes Widget haben, können Sie mit einem Widget FractionallySizedBox einen Prozentsatz des verfügbaren Platzes angeben, der gefüllt werden soll. Hier wird das Grün Container so eingestellt, dass es 70% der verfügbaren Breite und 30% der verfügbaren Höhe ausfüllt.

FractionallySizedBox

Widget myWidget() {
  return FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child: Container(
      color: Colors.green,
    ),
  );
}

Erweitert

Mit dem Widget Expanded kann ein Widget den verfügbaren Platz horizontal ausfüllen, wenn es sich in einer Zeile befindet, oder vertikal, wenn es sich in einer Spalte befindet. Sie können die Eigenschaft flex mit mehreren Widgets verwenden, um ihnen eine Gewichtung zu geben. Hier nimmt das Grün Container 70% der Breite und das Gelb Container 30% der Breite ein.

Expanded

Wenn Sie es vertikal machen möchten, ersetzen Sie einfach Row durch Column.

Widget myWidget() {
  return Row(
    children: <Widget>[
      Expanded(
        flex: 7,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 3,
        child: Container(
          color: Colors.yellow,
        ),
      ),
    ],
  );
}

Ergänzungscode

Hier ist der main.Dart Code für Ihre Referenz.

import 'package:flutter/material.Dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("FractionallySizedBox"),
        ),
        body: myWidget(),
      ),
    );
  }
}

// replace with example code above
Widget myWidget() {
  return ...
}
86
Suragch

Sie können eine Spalte/Zeile mit flexibel oder erweiterten untergeordneten Elementen mit flexiblen Werten erstellen, die sich zu den gewünschten Prozentsätzen addieren.

Möglicherweise ist auch das Widget AspectRatio hilfreich.

12
Collin Jackson
MediaQuery.of(context).size.width
7
Nitin Mehta

sie können MediaQuery mit dem aktuellen Kontext Ihres Widgets verwenden und anschließend die Breite oder Höhe wie folgt erhalten: double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height Sie können sie mit dem gewünschten Prozentsatz multiplizieren

5
parth jansari

wenn Sie GridView verwenden, können Sie so etwas wie die Lösung von Ian Hickson verwenden.

crossAxisCount: MediaQuery.of(context).size.width <= 400.0 ? 3 : MediaQuery.of(context).size.width >= 1000.0 ? 5 : 4
2
Rody Davis

Ermitteln Sie zuerst die Bildschirmgröße.

Size size = MediaQuery.of(context).size;

Danach können Sie width abrufen und mit 0.5 Multiplizieren, um 50% der Bildschirmbreite zu erhalten.

double width50 = size.width * 0.5;

Aber das Problem tritt normalerweise in height auf, wenn wir es verwenden

double screenHeight = size.height;

Die Höhe, die wir erhalten, ist die globale Höhe, die StatusBar + notch + AppBar height enthält. Um also die linke Höhe des Geräts zu erhalten, müssen wir padding height (StatusBar + notch) und AppBar height von der Gesamthöhe subtrahieren . So machen wir es.

double abovePadding = MediaQuery.of(context).padding.top;
double appBarHeight = appBar.preferredSize.height;
double leftHeight = screenHeight - abovePadding - appBarHeight;

Jetzt können wir folgendes verwenden, um 50% unseres Bildschirms in der Höhe zu bekommen.

double height50 = leftHeight * 0.5
2
CopsOnRoad