Comment faire pour obtenir l'extension d'un widget à la fois verticale (hauteur) et horizontale (largeur) en direction de

Le code ci-dessous définit un tableau dans lequel j'aurais besoin d'atteindre pour le graphique à être élargi à la fois verticale (hauteur) et horizontale (largeur) de direction. La méthode suggérée (par exemple https://docs.flutter.io/flutter/widgets/Row-class.html) est d'utiliser Expanded dans Row ou Column.

Le graphique widget je suis en train de développer étend CustomPaint, sans enfants, tout est peint à l'aide d'un CustomPainter sur la toile, dans la CustomPainter.paint(canvas, size).

Ce code

return new Scaffold(
  appBar: new AppBar(
    title: new Text(widget.title),
  ),
  body: new Center(    
    child: new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        new Text(
          'vvvvvvvv:',
        ),
        new RaisedButton(
          color: Colors.green,
          onPressed: _chartStateChanger,
        ),
        new Text(
          'vvvvvvvv:',
        ),    
        new Expanded( //Expanded in Column, no expansion vertically 
          child: new Row(
            children: [
              new Text('>>>'),    
              new Expanded(//Expanded in Row, expands horizontally
                child: new Chart(  //extends CustomPaint
                  //size: chartLogicalSize,
                  painter: new ChartPainter( //extends CustomPainter
                    chartData: _chartData,
                    chartOptions: _chartOptions,
                  ),
                ),
              ),
              new Text('<<<'),
            ],
          ),  //row
        ),
        new Text('^^^^^^:'),
        new RaisedButton(
          color: Colors.green,
          onPressed: _chartStateChanger,
        ),
      ],
    ),
  ),
);

résultat ressemble à ceci: (code de ChartPainter n'est pas indiqué pour des raisons de concision)
Comment faire pour obtenir l'extension d'un widget à la fois verticale (hauteur) et horizontale (largeur) en direction de

À l'intérieur de la ChartPainter.paint(canvas, size) il y a un print() l'impression de la taille.

print(" ### Taille: paint(): adopté taille = ${taille}");

Le résultat de la peinture->print ci-dessus est:

I/flutter ( 4187): ### Taille: paint(): adopté taille = Taille(340.0, 0.0)

L'impression ainsi que le montre l'image, que la largeur de l'expansion sur le niveau de la ligne a été transmis à la CustomPainter.print(canvas, size) (largeur = 340.0), mais la hauteur de l'expansion sur la colonne n'a pas adopté la coutume peintre d'impression (hauteur = 0.0). Bien que le résultat montre que la ligne ne se étendue de la hauteur, si ce n'était pas passée à l'intérieur de la ligne à la CustomPainter - 0 hauteur a été reçu.

De quoi ai-je besoin de changer pour atteindre la hauteur de l'expansion?

Grâce

Eh bien, après descendant plus profondément dans l'excellent Flottement de la documentation de l'algorithme de mise en page en docs.flutter.io/flutter/widgets/Row-class.html , je vois que je besoin d'ajouter crossAxisAlignment: CrossAxisAlignment.tronçon de la ligne, comme ceci : new Row( crossAxisAlignment: CrossAxisAlignment.stretch, <- added line children: [
Envisager de répondre à votre propre question, si vous êtes satisfait de votre solution.

InformationsquelleAutor mzimmermann | 2017-08-25

flutter

Ici est une réduction de cas de test pour le problème vous de voir. La solution est de donner à votre Row un crossAxisAlignment de CrossAxisAlignment.stretch. Sinon, il va essayer de déterminer la valeur intrinsèque de la hauteur de votre CustomPaint qui est égale à zéro, car il n'a pas à avoir un enfant.

import 'package:flutter/material.dart';

//from https://stackoverflow.com/questions/45875334/how-to-achieve-expansion-of-a-widget-in-both-vertical-height-and-horizontal-w

class MyCustomPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    //NOT using crossAxisAlignment: CrossAxisAlignment.stretch => width = 222.0, height=0.0
    //using crossAxisAlignment: CrossAxisAlignment.stretch     => width = 222.0, height=560.0
    print("width = ${size.width}, height=${size.height}");
    canvas.drawRect(Offset.zero & size, new Paint()..color = Colors.blue);
  }

  @override
  bool shouldRepaint(MyCustomPainter other) => false;
}
void main() {
  runApp(new MaterialApp(
    home: new Scaffold(
        body: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('Above Paint'),
            //Expanded - because we are in Column, expand the
            //           contained row's height
            new Expanded(
              child: new Row(
                //The crossAxisAlignment is needed to give content height > 0
                //  - we are in a Row, so crossAxis is Column, so this enforces
                //    to "stretch height".
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  new Text('Left of Paint'),
                  //Expanded - because we are in Row, expand the
                  //          contained Painter's width
                  new Expanded(
                    child: new CustomPaint(
                      painter: new MyCustomPainter(),
                    ),
                  ),
                  new Text('Right of Paint'),
                ],
              ),
            ),
            new Text('Below Paint'),
          ],
        )
    ),
  ));
}

J'ai édité le fragment comme il manquait par erreur, je suis assez sûr, le crossAxisAlignment: CrossAxisAlignment.stretch. Également ajouté quelques commentaires. Si tout cela est Ok avec vous s'il vous plaît examen, et je vais accepter, sinon faites le moi savoir merci.
Ouais le fragment de code qui était censé être une simple démonstration du problème dans votre question, pas une démonstration de la réponse. L'Ajout De CrossAxisAlignment.stretch est la réponse.
Ok, mes modifications sont en attente d'examen par les pairs "" - pas sûr de qui et comment ça se passe, vous pouvez le faire? Dans tous les cas attendre et de les accepter.

InformationsquelleAutor Collin Jackson

Il ya une meilleure façon que de nidification Row, Expended et Column widget. Vous pouvez utiliser le Container widget avec Constraints à BoxConstraints.expend().

Voici le code composant logiciel enfichable de mon widget.

    Widget build(BuildContext context) {
      return Container(
        constraints: BoxConstraints.expand(), 
        child: FutureBuilder(
          future: loadImage(),
          builder: (BuildContext context, AsyncSnapshot<ui.Image> snapshot) {
            switch(snapshot.connectionState) {
              case ConnectionState.waiting : 
                return Center(child: Text("loading..."),);
              default:
                if (snapshot.hasError) {
                  return Center(child: Text("error: ${snapshot.error}"),);
                } else {
                  return ImagePainter(image: snapshot.data);
                }
              }
            },
          ),
      );
    }

InformationsquelleAutor Natwar Singh

Pour ceux qui ont lutté pour obtenir le gradient de concert avec le comportement Matériel:

return new Stack(
  children: <Widget>[
    new Material(
      elevation: 10,
      borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
      color: Colors.transparent,
      child: new Container(
        constraints: BoxConstraints.expand(height: 50),
      ),
    ),
    new Container(
      constraints: BoxConstraints.expand(height: 50),
      decoration: BoxDecoration(
        borderRadius: new BorderRadius.all(new Radius.circular(30.0)),
        gradient: new LinearGradient(
            colors: [color1, color2],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
      ),
      child: new FloatingActionButton.extended(
        backgroundColor: Colors.transparent,
        foregroundColor: Colors.transparent,
        highlightElevation: 0,
        elevation: 0,
        onPressed: () {
          onPressed();
        },
        label: new Text(this.caption,
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.body1),
      ),
    )
  ],
)

InformationsquelleAutor Artem Panfilov

Vous devez vous connecter pour publier un commentaire.