Dimensionamento degli elementi in percentuale della larghezza / altezza dello schermo


154

Esiste un modo semplice (non LayoutBuilder) per ridimensionare un elemento rispetto alla dimensione dello schermo (larghezza / altezza)? Ad esempio: come posso impostare la larghezza di un CardView al 65% della larghezza dello schermo.

Non può essere fatto all'interno del buildmetodo (ovviamente), quindi dovrebbe essere rinviato fino a dopo la compilazione. C'è un posto preferito per mettere la logica in questo modo?


Sto solo dicendo che questa non è generalmente una buona pratica IMO, è roba di web design. Nelle app dovresti generalmente usare i pixel del dispositivo per definire le dimensioni e utilizzare i padding per inserire i tuoi widget, poiché le proporzioni sono quasi sempre le stesse (tranne che per i tablet).
Leodriesch,

7
Dopo altri 1,5 anni, sembra che dopo tutto non sia una cattiva idea. Ogni mese escono nuovi telefoni con proporzioni più strane e strane.
Farid,

Risposte:


156

FractionallySizedBoxpuò anche essere utile. Puoi anche leggere la larghezza dello schermo direttamente da MediaQuery.of(context).sizee creare un riquadro di dimensioni basato su quello

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

se vuoi davvero ridimensionare come una frazione dello schermo indipendentemente dal layout.


203

Questa è una risposta supplementare che mostra l'implementazione di un paio delle soluzioni menzionate.

FractionallySizedBox

Se si dispone di un singolo widget, è possibile utilizzare un FractionallySizedBoxwidget per specificare una percentuale dello spazio disponibile da riempire. Qui il verde Containerè impostato per riempire il 70% della larghezza disponibile e il 30% dell'altezza disponibile.

FractionallySizedBox

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

allargato

Il Expandedwidget consente a un widget di riempire lo spazio disponibile, in orizzontale se si trova in una riga o in verticale se si trova in una colonna. È possibile utilizzare la flexproprietà con più widget per assegnare loro pesi. Qui il verde Containeroccupa il 70% della larghezza e il giallo Containeroccupa il 30% della larghezza.

allargato

Se vuoi farlo verticalmente, sostituiscilo Rowcon Column.

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

Codice supplementare

Ecco il main.dartcodice per il tuo riferimento.

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 ...
}

4
È così che scrivi una risposta StackOverflow! Grazie! Mi ha aiutato con il mio Dialogstile :)
Aleksandar il

117

Questo potrebbe essere un po 'più chiaro:

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

double yourWidth = width * 0.65;

Spero che questo abbia risolto il tuo problema.


16

È possibile creare una colonna / riga con figli flessibili o espansi con valori flessibili che si sommano alle percentuali desiderate.

È inoltre possibile trovare utile il widget AspectRatio .



9

Esistono molti modi per farlo

1. Utilizzo di MediaQuery: restituisce lo schermo intero del dispositivo tra cui barra delle applicazioni, barra degli strumenti

 Container(
        width: MediaQuery.of(context).size.width * 0.50,
        height: MediaQuery.of(context).size.height*0.50, 
        color: Colors.blueAccent[400],
 )

inserisci qui la descrizione dell'immagine


2. Utilizzo di Espanso: è possibile impostare larghezza / altezza nel rapporto

 Container(
        height: MediaQuery.of(context).size.height * 0.50,
        child: Row(
          children: <Widget>[
            Expanded(
              flex: 70,
              child: Container(
                color: Colors.lightBlue[400],
              ),
            ),
            Expanded(
              flex: 30,
              child: Container(
                color: Colors.deepPurple[800],
              ),
            )
          ],
        ),
    )

inserisci qui la descrizione dell'immagine



3. Altri, come flessibile e aspectRatio e FractionallySizedBox


7

puoi usare MediaQuery con il contesto attuale del tuo widget e ottenere larghezza o altezza come questa double width = MediaQuery.of(context).size.width double height = MediaQuery.of(context).size.height dopo, puoi moltiplicarlo per la percentuale che desideri


7

Per prima cosa prendi le dimensioni dello schermo.

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

Dopodiché puoi ottenerlo widthe moltiplicarlo con 0.5per ottenere il 50% della larghezza dello schermo.

double width50 = size.width * 0.5;

Ma il problema generalmente si presenta height, di default quando usiamo

double screenHeight = size.height;

L'altezza che otteniamo è l'altezza globale che include StatusBar+ notch+ AppBaraltezza. Quindi, per ottenere l'altezza sinistra del dispositivo, dobbiamo sottrarre l' paddingaltezza ( StatusBar+ notch) e l' AppBaraltezza dall'altezza totale. Ecco come lo facciamo.

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

Ora possiamo usare follow per ottenere il 50% del nostro schermo in altezza.

double height50 = leftHeight * 0.5

3

se stai usando GridView puoi usare qualcosa come la soluzione di Ian Hickson.

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

2

Usa il Widget LayoutBuilder che ti darà i vincoli che puoi usare per ottenere l'altezza che esclude la AppBar e il riempimento. Quindi utilizzare un SizedBox e fornire la larghezza e l'altezza utilizzando i vincoli di LayoutBuilder

return LayoutBuilder(builder: (context2, constraints) {
  return Column(
    children: <Widget>[
      SizedBox(
        width: constraints.maxWidth,
        height: constraints.maxHeight,
        ...
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.