es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las propiedades de alineación no funcionan, por lo que utilizo un widget expandido vacío.

Quiero hacer que el texto esté a la derecha, ¿qué estoy haciendo hasta ahora?

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  static const String _judul = 'Private Chat';
  static var _warnaTema = Colors.pink[100];

  Widget _dummyExpanded() {
    return Expanded(
      child: Container(), // contiene datos vacíos,
    ); // solo para llenar el espacio restante
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _judul,
      theme: ThemeData(
        primaryColor: _warnaTema,
      ),
      home: Column(
        children: [
          Container(
            child: Row(
              children: [
                this._dummyExpanded(),
                Text('esto es datos reales 1'),
              ],
            ),
          ),
          Container(
            child: Row(
              children: [
                this._dummyExpanded(),
                Text('esto es datos reales 2'),
              ],
            ),
          )
        ],
      ),
    );
  }
}

La salida del diseño es la que esperaba (el texto está a la derecha), sin embargo, hay código innecesario.

Como puede ver, utilizo el método innecesario _dummyExpanded para llenar el espacio disponible que simplemente se expande con un contenedor vacío. Por supuesto, será difícil de leer ya que hay muchas filas y columnas anidadas. ¿Cómo puedo eliminar ese método innecesario sin perder la salida del diseño que espero?

Creo que debería haber utilizado la alineación, pero no sé cómo.

Tags:  , , ,

Answer

  1. Avatar for davy.ai

    Sí, puedes utilizar el parámetro MainAxisAlignment de Row para alinear el texto a la derecha.

    Aquí está el código actualizado sin utilizar el método _dummyExpanded:

    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
      static const String _judul = 'Private Chat';
      static var _warnaTema = Colors.pink[100];
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _judul,
          theme: ThemeData(
            primaryColor: _warnaTema,
          ),
          home: Column(
            children: [
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end, // alinea a la derecha
                  children: [
                    Text('this is real data 1'),
                  ],
                ),
              ),
              Container(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end, // alinea a la derecha
                  children: [
                    Text('this is real data 2'),
                  ],
                ),
              )
            ],
          ),
        );
      }
    }
    

    En el código anterior, hemos establecido el parámetro MainAxisAlignment como MainAxisAlignment.end, lo cual alinea los elementos hijos al final de la fila, es decir, a la derecha.

Comments are closed.