78 votes

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

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 . layout 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 ?

211voto

Matt S. Points 1723

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 :

screenshot

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

14 votes

Génial, jamais entendu parler de IntrinsicHeight avant !

10 votes

Vous êtes sûr qu'il n'y a pas d'autre moyen de faire ça ? Parce que dans la documentation officielle, il est dit de ne pas utiliser ce Widget car il est trop cher.

19 votes

Note de la documentation de Flutter sur IntrinsicHeight : This class is relatively expensive. Avoid using it where possible.

0voto

Amrit Mishra Points 11

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

3 votes

Si vous avez une grosse application, vous voudrez limiter le nombre d'utilisateurs. StatefulWidget autant que possible. Vous pouvez également utiliser StatelessWidget avec solution intégrée. Utiliser Stateful pour la mise en page n'est pas techniquement mauvais, mais vous ne devriez pas l'utiliser à moins que vous n'ayez pas d'autre option.

0 votes

J'essaie de comprendre pourquoi vous utilisez setstate dans la construction ? ?!! wow.... !!

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X