afficher/masquer les widgets sur le Flutter par programmation

Sur Android, chaque Vue unique sous-classe a un "setVisibility" méthode qui vous permet de modifier la visibilité d'un objet de Vue

Il y a 3 options de réglage de la visibilité:

visible: Rend l'Affichage visible à l'intérieur de la mise en page
invisible: Masque la Vue, mais laisse un vide qui est équivalent à ce que l'Affichage en occuper si elle était visible
disparu: Masque la Vue, et supprime entièrement à partir de la mise en page. C'est comme si sa hauteur et la largeur ont été 0dp

Est-il quelque chose d'équivalent à la ci-dessus pour les Widgets dans le Flutter?

Pour une référence rapide:
https://developer.android.com/reference/android/view/View.html#attr_android:visibility

OriginalL'auteur user3217522 | 2017-06-11

15

Vous pouvez utiliser Opacity avec un opacity: de 0.0 pour dessiner un élément caché, mais encore occuper l'espace.

Faire ne pas occuper l'espace, de le remplacer par un vide Container().

EDIT:
L'envelopper dans une Opacité de l'objet, procédez de la manière suivante:
```
            new Opacity(opacity: 0.0, child: new Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
              ),
              child: new Icon(pencil, color: CupertinoColors.activeBlue),
            ))
```
Les Développeurs de Google tutoriel rapide sur l'Opacité: https://youtu.be/9hltevOHQBw

Merci!!!! Ouais c'est pas la façon la plus propre de le faire, mais il va certainement faire l'objet. Aucune chance d'avoir une visibilité de la fonctionnalité intégrée avec des widgets dans l'avenir?
Si le widget normalement réagit à la saisie de l'utilisateur, assurez-vous de l'envelopper dans un IgnorePointer ainsi, sinon l'utilisateur peut toujours déclencher.

OriginalL'auteur Collin Jackson

De collaborer avec la question et de montrer un exemple de le remplacer par un vide Container().

Voici l'exemple ci-dessous:

afficher/masquer les widgets sur le Flutter par programmation

import "package:flutter/material.dart";
void main() {
runApp(new ControlleApp());
}
class ControlleApp extends StatelessWidget { 
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "My App",
home: new HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
HomePageState createState() => new HomePageState();
}
class HomePageState extends State<HomePage> {
bool visibilityTag = false;
bool visibilityObs = false;
void _changed(bool visibility, String field) {
setState(() {
if (field == "tag"){
visibilityTag = visibility;
}
if (field == "obs"){
visibilityObs = visibility;
}
});
}
@override
Widget build(BuildContext context){
return new Scaffold(
appBar: new AppBar(backgroundColor: new Color(0xFF26C6DA)),
body: new ListView(
children: <Widget>[
new Container(
margin: new EdgeInsets.all(20.0),
child: new FlutterLogo(size: 100.0, colors: Colors.blue),
),
new Container(
margin: new EdgeInsets.only(left: 16.0, right: 16.0),
child: new Column(
children: <Widget>[
visibilityObs ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Observation",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "obs");
},
),
),
],
) : new Container(),
visibilityTag ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "Tags",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "tag");
},
),
),
],
) : new Container(),
],
)
),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new InkWell(
onTap: () {
visibilityObs ? null : _changed(true, "obs");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.comment, color: visibilityObs ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Observation",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityObs ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
new SizedBox(width: 24.0),
new InkWell(
onTap: () {
visibilityTag ? null : _changed(true, "tag");
},
child: new Container(
margin: new EdgeInsets.only(top: 16.0),
child: new Column(
children: <Widget>[
new Icon(Icons.local_offer, color: visibilityTag ? Colors.grey[400] : Colors.grey[600]),
new Container(
margin: const EdgeInsets.only(top: 8.0),
child: new Text(
"Tags",
style: new TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.w400,
color: visibilityTag ? Colors.grey[400] : Colors.grey[600],
),
),
),
],
),
)
),
],
)                    
],
)
);
}
}

Ce doit être la accepté de répondre. C'est la bonne mise en œuvre de l'option "afficher/masquer les widgets par programmation"

OriginalL'auteur rafaelcb21

18

Invisible: Le widget prend physiques de l'espace sur l'écran, mais pas visible à l'utilisateur.

Allé: Le widget ne prend pas tout l'espace physique et est complètement disparu.

Invisible exemple
```
Visibility(
child: Text("Invisible"),
maintainSize: true, 
maintainAnimation: true,
maintainState: true,
visible: false, 
),
```
Allé exemple
```
Visibility(
child: Text("Gone"),
visible: false,
),
```
OriginalL'auteur CopsOnRoad
3

Flutter contient maintenant une La Visibilité Widget que vous devez utiliser pour afficher/masquer les widgets. Le widget peut également être utilisé pour basculer entre les 2 widgets en changeant le remplacement.

Ce widget peut atteindre l'un quelconque des états visible, invisible, disparu et beaucoup plus.
```
    Visibility(
visible: true //Default is true,
child: Text('Ndini uya uya'),
//maintainSize: bool. When true this is equivalent to invisible;
//replacement: Widget. Defaults to Sizedbox.shrink, 0x0
),
```
OriginalL'auteur Edmore M Gonese Digolodollarz

Pour les débutants essayer cela aussi.

class Visibility extends StatefulWidget {
@override
_VisibilityState createState() => _VisibilityState();
}
class _VisibilityState extends State<Visibility> {
bool a = true;
String mText = "Press to hide";
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Visibility",
home: new Scaffold(
body: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new RaisedButton(
onPressed: _visibilitymethod, child: new Text(mText),),
a == true ? new Container(
width: 300.0,
height: 300.0,
color: Colors.red,
) : new Container(),
],
)
),
);
}
void _visibilitymethod() {
setState(() {
if (a) {
a = false;
mText = "Press to show";
} else {
a = true;
mText = "Press to hide";
}
});
}
}

OriginalL'auteur Hitesh Danidhariya

Mise à jour

Flutter a maintenant un Visibilité widget. Pour mettre en œuvre votre propre solution de démarrer avec le code ci-dessous.

Faire un widget vous-même.

afficher/masquer

class ShowWhen extends StatelessWidget {
final Widget child;
final bool condition;
ShowWhen({this.child, this.condition});
@override
Widget build(BuildContext context) {
return Opacity(opacity: this.condition ? 1.0 : 0.0, child: this.child);
}
}

afficher/supprimer

class RenderWhen extends StatelessWidget {
final Widget child;
final bool condition;
RenderWhen({this.child, this.show});
@override
Widget build(BuildContext context) {
return this.condition ? this.child : Container();
}
}

Par le fait que quelqu'un a un meilleur nom pour les widgets ci-dessus?

Plus De Lectures

L'Article sur la façon de rendre une visibilité widget.

OriginalL'auteur Amsakanna

0

Essayer de la "Scène" widget
si l'attribut de la scène:vrai les occupent pas l'espace physique et de l'invisible,
si l'attribut de la scène:false, elle va occuper l'espace physique et visible

De la scène(
dans les coulisses: true,
enfant: Texte("Visible"),
),

OriginalL'auteur Android Team
-3

Une solution est de mettre tis widget propriété de couleur pour les Couleurs.transparent. Par exemple:
```
IconButton(
icon: Image.asset("myImage.png",
color: Colors.transparent,
),
onPressed: () {},
),
```
Pas une bonne solution car la transparence IconButton reçoit toujours sur et occupent de l'espace. Veuillez modifier ou de supprimer cette réponse avant que les gens downvote.

OriginalL'auteur edmond

Vous devez vous connecter pour publier un commentaire.