En este artículo, aprenderemos sobre las diferencias clave entre los widgets Contenedor y Fila/Columna. Los widgets Fila y Columna pertenecen a una categoría similar y tienen usos idénticos. Estos son los widgets básicos que usarías en casi todas las aplicaciones de flutter. Los discutiremos en breve.
Envase
Este es el widget más utilizado en todas las aplicaciones de flutter. Se utiliza principalmente para diseñar sus widgets secundarios. Se necesita un solo niño. Algunos widgets flutter se enfocan solo en su funcionalidad principal y no contienen muchas opciones de estilo. El widget de contenedor viene al rescate y le proporciona varios widgets comunes de pintura, posicionamiento y tamaño.
Container( child: Widget //Another flutter widget )
Fila columna
Estos son widgets que pueden contener múltiples widgets secundarios. La fila es el widget que puede mostrar varios widgets secundarios de manera horizontal. La columna muestra los widgets secundarios de forma vertical. De forma predeterminada, estos widgets no admiten el desplazamiento. Se puede habilitar envolviéndolo con otros widgets. Pero, si hay numerosos widgets secundarios, se prefiere usar ListView.
Row(
children: [
Container(), // First Widget
Text(), // Second Widget
----,
----, // Multiple Widgets
])
Column(
children: [
Container(), // First Widget
Text(), // Second Widget
----,
----, // Multiple Widgets
])
Comparación
|
Envase |
Columna/Fila |
|---|---|
| Toma exactamente un widget secundario | Toma múltiples widgets secundarios (ilimitados) |
| Ricas opciones de alineación y estilo disponibles | Opciones de alineación disponibles, pero no hay opciones de estilo |
| Ancho flexible (por ejemplo, ancho infantil, ancho disponible, …) | Siempre toma la altura completa disponible (columna)/ancho (fila) |
| Perfecto para estilo personalizado y alineación. | Debe usarse si los widgets se colocan uno al lado del otro o uno encima del otro |
Ejemplo:
Dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('GeeksforGeeks'),
backgroundColor: Colors.green,
),
body: Column( //All elements are wrapped
children: [ //in this column
SizedBox(
height: 15,
),
SizedBox(
height: 20,
child: Text('Demonstration of Row'),
),
Row(
children: [
Card(
margin: EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: EdgeInsets.all(25),
child: Text(
'GeeksforGeeks',
style: TextStyle(color: Colors.green),
),
),
),
SizedBox(
width: 2,
),
Card(
margin: EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: EdgeInsets.all(25),
child: Text(
'GeeksforGeeks',
style: TextStyle(color: Colors.green),
),
),
),
],
),
SizedBox(
height: 30,
),
SizedBox(
height: 20,
child: Text('Demonstration of Column'),
),
Column(
children: [
Card(
margin: EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: EdgeInsets.all(25),
child: Text(
'GeeksforGeeks',
style: TextStyle(color: Colors.green),
),
),
),
SizedBox(
width: 4,
),
Card(
margin: EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: EdgeInsets.all(25),
child: Text(
'GeeksforGeeks',
style: TextStyle(color: Colors.green),
),
),
),
],
)
],
),
);
}
}
Producción:
En el ejemplo anterior, hemos mostrado cómo se usan los widgets de fila y columna en combinación con un widget de contenedor. Cuando no había opciones de estilo disponibles en el widget secundario, lo envolvíamos con un contenedor para agregar algo de relleno al widget secundario.
Publicación traducida automáticamente
Artículo escrito por tejinder2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA