Flutter Layout Row / Column - partager la largeur, étendre la hauteur

Question

J'ai toujours un peu de mal avec la mise en page dans Flutter.
Actuellement, je souhaite que l'espace disponible soit partagé entre 3 widgets, dans une disposition en quadrant. La largeur est partagée de manière égale (cela fonctionne bien avec 2 widgets). Expanded dans une rangée), mais maintenant je veux aussi que la hauteur s'ajuste automatiquement pour que widget3.height == widget1.height + widget2.height . Si le contenu de widget3 est plus grande, je veux widget1 et widget2 pour régler leur hauteur et vice versa.

Est-ce même possible dans Flutter ?

Answer 1

Jetez un coup d'œil à IntrinsicHeight ; envelopper la rangée de racines devrait donner l'effet que vous recherchez :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Rows & Columns')),
        body: RowsAndColumns(),
      ),
    );
  }
}

class RowsAndColumns extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 100.0),
      child: IntrinsicHeight(
        child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
          Expanded(
            child: Column(children: [
              Container(height: 120.0, color: Colors.yellow),
              Container(height: 100.0, color: Colors.cyan),
            ]),
          ),
          Expanded(child: Container(color: Colors.amber)),
        ]),
      ),
    );
  }
}

En ajustant les hauteurs des conteneurs de la colonne, le conteneur de droite est redimensionné en conséquence :

https://gist.github.com/mjohnsullivan/c5b661d7b3b4ca00599e8ef87ff6ac61

Answer 2

Je suis nouveau dans le domaine du flutter. Veuillez me corriger si je fais quelque chose de mal ici. Je pense que cela peut également être réalisé en utilisant setState((){}) sans utiliser IntrinsicHeight.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}`enter code here`

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    double h1 = 100;
    double h2 = 200;
    double h3;
    setState(() {
      h3 = h1 + h2;
    });
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Padding(
            padding: const EdgeInsets.only(top: 100.0),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(
                  child: Column(
                    children: [
                      Container(
                        color: Colors.green,
                        height: h1,
                      ),
                      Container(
                        color: Colors.orange,
                        height: h2,
                      )
                    ],
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.yellow,
                    height: h3,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Trouvez l'image ici

Le code peut également être trouvé ici : https://gist.github.com/Amrit0786/9d228017c2df6cf277fbbaa4a6b20e83