web-dev-qa-db-fra.com

Dimensionnement des éléments en pourcentage de la largeur / hauteur de l'écran

Existe-t-il un moyen simple (non-LayoutBuilder) de dimensionner un élément par rapport à la taille de l'écran (largeur/hauteur)? Par exemple, comment définir la largeur d'un CardView sur 65% de la largeur de l'écran.

Cela ne peut pas être fait à l'intérieur de la méthode build (évidemment), donc il devrait être différé jusqu'à la post-génération. Y a-t-il un endroit privilégié pour mettre une telle logique?

flutter
73
Luke

FractionallySizedBox peut également être utile. Vous pouvez également lire la largeur de l’écran directement à partir de MediaQuery.of(context).size et créer une zone de taille basée sur celle-ci.

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

si vous voulez vraiment dimensionner comme une fraction de l’écran, quelle que soit la disposition.

64
Ian Hickson

Cela pourrait être un peu plus clair:

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

double yourWidth = width * 0.65;

J'espère que cela a résolu votre problème.

98
Keshav Aditya R.P

Ceci est une réponse complémentaire montrant la mise en œuvre de certaines des solutions mentionnées.

FractionallySizedBox

Si vous avez un seul widget, vous pouvez utiliser un widget FractionallySizedBox pour spécifier un pourcentage de l'espace disponible à remplir. Ici, le vert Container est défini pour remplir 70% de la largeur disponible et 30% de la hauteur disponible.

FractionallySizedBox

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

Étendu

Le widget Expanded permet à un widget de remplir l'espace disponible, horizontalement s'il se trouve sur une ligne ou verticalement s'il se trouve dans une colonne. Vous pouvez utiliser la propriété flex avec plusieurs widgets pour leur attribuer des pondérations. Ici, le vert Container occupe 70% de la largeur et le jaune Container 30% de la largeur.

Expanded

Si vous voulez le faire verticalement, remplacez simplement Row par Column.

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

Code supplémentaire

Voici le code main.Dart pour votre référence.

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

Vous pouvez créer une colonne/ligne avec des enfants Flexible ou développés ayant des valeurs de flexion qui s’ajoutent aux pourcentages souhaités.

Vous pouvez également trouver le widget AspectRatio utile.

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

vous pouvez utiliser MediaQuery avec le contexte actuel de votre widget et obtenir la largeur ou la hauteur comme ceci double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height après cela, vous pouvez le multiplier par le pourcentage souhaité.

5
parth jansari

si vous utilisez GridView, vous pouvez utiliser quelque chose comme la solution de Ian Hickson.

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

D'abord obtenir la taille de l'écran.

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

Après cela, vous pouvez obtenir width et le multiplier par 0.5 pour obtenir 50% de la largeur de l'écran.

double width50 = size.width * 0.5;

Mais le problème vient généralement de height, par défaut quand on utilise

double screenHeight = size.height;

La hauteur que nous obtenons est la hauteur globale qui comprend StatusBar + notch + AppBar height. Donc, pour obtenir la hauteur gauche du périphérique, nous devons soustraire padding height (StatusBar + notch) et AppBar hauteur de la hauteur totale. Voici comment nous le faisons.

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

Nous pouvons maintenant utiliser ce qui suit pour obtenir 50% de notre écran en hauteur.

double height50 = leftHeight * 0.5
2
CopsOnRoad