¿El equivalente de wrap_content y match_parent en flutter?


127

En Android match_parenty wrap_contentse utilizan para cambiar el tamaño de los widgets automáticamente en relación con su padre al contenido que contiene el widget.

En Flutter, parece que todos los widgets están configurados de wrap_contentforma predeterminada , ¿cómo lo cambiaría para poder completar el suyo widthy heightel de su padre?

Respuestas:


161

Puede hacerlo con un pequeño truco: suponga que tiene requisitos de: (Ancho, Alto)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

2
para que coincida con el padre, también puede envolver sus widgets con SizedBox.expand ()
Wecherowski

138

Con el fin de obtener un comportamiento de match_parent y wrap_content tenemos que utilizar mainAxisSize propiedad en fila / columna widget, el mainAxisSize propiedad toma MainAxisSize enumeración tener dos valores, que es MainAxisSize.min que se comporta como wrap_content y MainAxisSize.max que se comporta como match_parent .

ingrese la descripción de la imagen aquí

Enlace del artículo original


6
Agregaría que también existe el crossAxisAlignmentcampo en Filas y Columnas que se puede configurar CrossAxisAlignment.stretchpara expandirse horizontalmente dentro de una Columna, por ejemplo
wamfous

1
¡Muchas gracias! Voté a favor el año pasado, luego no he usado Flutter durante mucho tiempo y me olvidé de casi todo, y hoy me ayudaste de nuevo.
Chandler

33

La respuesta corta es que el padre no tiene un tamaño hasta que el niño tiene un tamaño.

La forma en que funciona el diseño en Flutter es que cada widget proporciona restricciones a cada uno de sus elementos secundarios, como "puedes tener este ancho, debes ser tan alto, debes tener al menos este ancho", o lo que sea (específicamente, ellos obtener un ancho mínimo, un ancho máximo, una altura mínima y una altura máxima). Cada niño toma esas restricciones, hace algo y elige un tamaño (ancho y alto) que coincide con esas restricciones. Luego, una vez que cada niño ha hecho lo suyo, el widget puede elegir su propio tamaño.

Algunos widgets intentan ser tan grandes como lo permiten los padres. Algunos widgets intentan ser tan pequeños como lo permiten los padres. Algunos widgets intentan coincidir con un cierto tamaño "natural" (por ejemplo, texto, imágenes).

Algunos widgets les dicen a sus hijos que pueden tener el tamaño que deseen. Algunos les dan a sus hijos las mismas limitaciones que les dieron sus padres.


Ian, cuando tengo un PageViewdentro de a Column, con otro Columndentro de la corriente page, obtengo un error de representación, pero puedo solucionarlo envolviendo el PageViewinterior de un Expandedo a Flexible. El problema es que esas 2 opciones solo amplían a su hijo. ¿Por qué no hay un widget relacionado para encoger y ajustar, como "envolver contenido", para resolver este tipo de problemas de renderizado?
Michel Feinstein

21

En realidad, hay algunas opciones disponibles:

Puede usar SizedBox.expand para hacer que su widget coincida con las dimensiones de los padres, o SizedBox (ancho: double.infinity) para que coincida solo con el ancho o SizedBox (heigth: double.infinity) para que coincida solo con la altura.

Si desea un comportamiento de wrap_content, depende del widget principal que esté utilizando, por ejemplo, si coloca un botón en una columna, se comportará como wrap_content y, para usarlo como match_parent, puede envolver el botón con un widget expandido o una caja de tamaño.

Con ListView, el botón obtiene un comportamiento match_parent y para obtener un comportamiento wrap_content, puede envolverlo con un widget Flex como Row.

El uso de un widget expandido hace que un elemento secundario de una fila, columna o flex se expanda para llenar el espacio disponible en el eje principal (por ejemplo, horizontalmente para una fila o verticalmente para una columna). https://docs.flutter.io/flutter/widgets/Expanded-class.html

El uso de un widget flexible le da a un hijo de una fila, columna o flex la flexibilidad de expandirse para llenar el espacio disponible en el eje principal (p. Ej., Horizontalmente para una fila o verticalmente para una columna), pero, a diferencia de Expandido, Flexible no lo hace. requiera que el niño llene el espacio disponible. https://docs.flutter.io/flutter/widgets/Flexible-class.html


7

Una solución sencilla:

Si un contenedor tiene solo un hijo de nivel superior, puede especificar la propiedad de alineación para el hijo y darle cualquier valor disponible. llenará todo el espacio del contenedor.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

De otra manera:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

BoxConstraints.expand(height: 100.0)funciona muy bien como width="match_parent"equivalente de Android
kosiara - Bartosz Kosarzycki

6

Usé esta solución, debes definir la altura y el ancho de tu pantalla usando MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

5
Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

1
Aunque su código puede responder a la pregunta, una buena respuesta siempre debe explicar qué hace el código y cómo resuelve el problema.
BDL

esta no es una respuesta para envolver contenido. esto es simplemente ancho y alto codificados de forma rígida.
Developine

1

Usa el widget Wrap.

Para Columnun comportamiento similar, intente:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Para Rowun comportamiento similar, intente:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Para obtener más información: Wrap (Flutter Widget)


0

Utilice esta línea de códigos dentro de la columna. Para wrap_content: mainAxisSize: MainAxisSize.min para match_parent:mainAxisSize: MainAxisSize.max


0

En realidad, existe una forma muy sencilla y ordenada de hacer esto.

Utilice el FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Este widget también es muy útil cuando desea ajustar el tamaño de su hijo a una fracción del tamaño de su padre.

Ejemplo:

Si desea que el niño ocupe el 50% del ancho de su padre, proporcione widthFactorcomo0.5


0

Para hacer que un niño complete su padre, simplemente envuélvalo en un FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.