क्रमिक रूप से फ़्लटर में विजेट दिखाएं / छिपाएं


116

Android में, हर एक Viewउपवर्ग में एक setVisibility()विधि होती है जो आपको किसी Viewवस्तु की दृश्यता को संशोधित करने की अनुमति देती है

दृश्यता सेट करने के 3 विकल्प हैं:

  • दर्शनीय: Viewलेआउट के अंदर दृश्यमान रेंडर
  • अदृश्य: छिपाता है View, लेकिन एक अंतर छोड़ देता है जो Viewदिखाई देने पर क्या होगा , इसके बराबर है
  • चला गया: छुपाता है View, और इसे पूरी तरह से लेआउट से निकालता है। यह ऐसा है जैसे इसके heightऔर widthथे0dp

क्या स्पंदन में विजेट्स के लिए उपरोक्त के बराबर कुछ है?

एक त्वरित संदर्भ के लिए: https://developer.android.com/reference/android/view/View.html#attr_android:visibility

जवाबों:


82

अद्यतन: चूंकि यह उत्तर लिखा गया था, Visibilityपेश किया गया था और इस समस्या का सबसे अच्छा समाधान प्रदान करता है।


आप उपयोग कर सकते हैं Opacityएक साथ opacity:की 0.0एक तत्व छिपा हुआ है लेकिन अभी भी स्थान में समा कर आकर्षित करने के लिए।

इसे जगह नहीं घेरने के लिए, इसे खाली जगह से बदलें Container()

संपादित करें: इसे एक अस्पष्टता वस्तु में लपेटने के लिए, निम्नलिखित करें:

            new Opacity(opacity: 0.0, child: new Padding(
              padding: const EdgeInsets.only(
                left: 16.0,
              ),
              child: new Icon(pencil, color: CupertinoColors.activeBlue),
            ))

Google डेवलपर शीघ्रता पर ट्यूटोरियल: https://youtu.be/9hltevOHQBw


3
धन्यवाद! हाँ, यह करने का सबसे साफ तरीका नहीं है, लेकिन यह निश्चित रूप से उद्देश्य को पूरा करेगा। भविष्य में विजेट्स के साथ दृश्यता कार्यक्षमता को एकीकृत करने का कोई मौका?
user3217522

3
यदि विजेट सामान्य रूप से उपयोगकर्ता इनपुट पर प्रतिक्रिया करता है, तो इसे एक IgnorePointerअच्छी तरह से लपेटना सुनिश्चित करें , अन्यथा उपयोगकर्ता अभी भी इसे ट्रिगर कर सकता है।
डंकन जोन्स

1
यह तब से आदर्श नहीं है क्योंकि विजेट अभी भी मौजूद है और नल आदि का जवाब दे सकता है। इसे संभालने के लिए सबसे अच्छे तरीके के लिए दृश्यता विजेट का उपयोग करके नीचे उत्तर देखें।
रसल ने

जैसा कि ऊपर की टिप्पणी कहती है, अपारदर्शिता का उपयोग करके रेंडरट्री पर विजेट को प्रस्तुत किया जाएगा, कुछ मामलों में आप क्या चाहते हैं। दृश्यता विजेट का उपयोग करना सबसे अधिक अनुशंसित है।
इसाक मौरा

एक विजेट को अदृश्य बनाना और अपारदर्शिता होना0 दो अलग-अलग चीजें हैं। एक अदृश्य विजेट के साथ, आप अभी भी इसके साथ बातचीत कर सकते हैं, यह सिर्फ अदृश्य है। दृश्यता विजेट आपको तब तक विजेट को हटाने की अनुमति देता है।
अंडरकवरकोडर

176

अदृश्य : विजेट स्क्रीन पर भौतिक स्थान लेता है, लेकिन उपयोगकर्ता को दिखाई नहीं देता है।

चला गया : विजेट कोई भौतिक स्थान नहीं लेता है और पूरी तरह से चला गया है।


अदृश्य उदाहरण

Visibility(
  child: Text("Invisible"),
  maintainSize: true, 
  maintainAnimation: true,
  maintainState: true,
  visible: false, 
),

उदाहरण दिया

Visibility(
  child: Text("Gone"),
  visible: false,
),

वैकल्पिक रूप से, आप ifअदृश्य और गए दोनों के लिए स्थिति का उपयोग कर सकते हैं ।

Column(
  children: <Widget>[
    if (show) Text("This can be visible/not depending on condition"),
    Text("This is always visible"),
  ],
) 

17
वह 'अगर' स्थिति सही है!
जॉन्क

मुझे प्यार है
ha

62

प्रश्न के साथ सहयोग करने के लिए और इसे खाली के साथ प्रतिस्थापित करने का एक उदाहरण दिखाएं Container()

यहाँ नीचे उदाहरण दिया गया है:

यहां छवि विवरण दर्ज करें

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],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
            ],
          )                    
        ],
      )
    );
  }
}

5
यह स्वीकृत उत्तर होना चाहिए। यह "शो /
हिडन

हाँ, यह निश्चित रूप से स्वीकार किया जाना चाहिए क्योंकि यह फ़्लटर यानी सेटस्टेट () का एक आधार स्तंभ का उपयोग करता है ... अन्यथा आप अपने स्टेटफुल विजेट में दृश्यमान / अदृश्य के बीच आगे और पीछे कैसे जा रहे हैं !?
यो एप्स

27

स्पंदन में अब एक दृश्यता विजेट शामिल है जिसे आपको विजेट दिखाने / छिपाने के लिए उपयोग करना चाहिए। प्रतिस्थापन को बदलकर विजेट को 2 विजेट के बीच स्विच करने के लिए भी उपयोग किया जा सकता है।

यह विजेट दृश्यमान, अदृश्य, चला गया और बहुत अधिक राज्यों को प्राप्त कर सकता है।

    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
    ),

19

Offstageविजेट का प्रयास करें

यदि offstage:trueभौतिक स्थान पर कब्जा नहीं है और अदृश्य है,

यदि विशेषता offstage:falseयह भौतिक स्थान और दृश्यमान पर कब्जा कर लेगी

Offstage(
   offstage: true,
   child: Text("Visible"),
),

इस पर ध्यान दें: स्पंदन डॉक्स स्थिति, "ऑफ़स्टेज का उपयोग विजेट के आयामों को स्क्रीन पर लाने के बिना मापने के लिए किया जा सकता है (अभी तक)। एक विजेट को देखने के लिए जब इसे ज़रूरत नहीं है, छिपाने के लिए, पूरी तरह से पेड़ से विजेट को हटाने के लिए पसंद करें। बजाय इसे एक ऑफ़स्टेज सबट्री में जीवित रखने के बजाय। "
ल्यूकिक

10
bool _visible = false;

 void _toggle() {
    setState(() {
      _visible = !_visible;
    });
  }

onPressed: _toggle,

Visibility(
            visible:_visible,
            child: new Container(
            child: new  Container(
              padding: EdgeInsets.fromLTRB(15.0, 0.0, 15.0, 10.0),
              child: new Material(
                elevation: 10.0,
                borderRadius: BorderRadius.circular(25.0),
                child: new ListTile(
                  leading: new Icon(Icons.search),
                  title: new TextField(
                    controller: controller,
                    decoration: new InputDecoration(
                        hintText: 'Search for brands and products', border: InputBorder.none,),
                    onChanged: onSearchTextChanged,
                  ),
                  trailing: new IconButton(icon: new Icon(Icons.cancel), onPressed: () {
                    controller.clear();
                    onSearchTextChanged('');
                  },),
                ),
              ),
            ),
          ),
          ),

9

में स्पंदन 1.5 और डार्ट 2.3 दृश्यता चला गया के लिए, आप कंटेनर का उपयोग करने के बिना संग्रह के भीतर एक अगर बयान का उपयोग करके दृश्यता सेट कर सकते हैं।

जैसे

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
              Text('This is text one'),
              if (_isVisible) Text('can be hidden or shown'), // no dummy container/ternary needed
              Text('This is another text'),
              RaisedButton(child: Text('show/hide'), onPressed: (){
                  setState(() {
                    _isVisible = !_isVisible; 
                  });
              },)

          ],
        )

यह इतना बेहतर है तो पिछले स्पंदन / डार्ट संस्करण में उपलब्ध विकल्प। धन्यवाद!
हैमर

8

आप अपने कोड के किसी भी विजेट को एक नए विजेट (विजिबिलिटी) के साथ एनकैप्सुलेट कर सकते हैं, यह विजेट के बाईं ओर पीले रंग के लैंप से है जिसे आप चाहते हैं कि यह दृश्यमान हो

उदाहरण: कहते हैं कि आप एक पंक्ति को अदृश्य बनाना चाहते हैं:

  1. दीपक में क्लिक करें और चुनें (विजेट के साथ लपेटें)
  2. विज़िबिलिटी के लिए विजेट का नाम बदलें
  3. दृश्यमान गुण जोड़ें और इसे असत्य पर सेट करें
  4. नव निर्मित विजेट (दृश्यता विजेट) का बच्चा वह विजेट है जिसे आप चाहते हैं कि वह अदृश्य हो

              Visibility(
                  visible: false,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      SizedBox(
                        width: 10,
                      ),
                      Text("Search",
                        style: TextStyle(fontSize: 20
                        ),),
                    ],
                  ),
                ),

मुझे उम्मीद है कि यह भविष्य में किसी की मदद करेगा


5

शुरुआत के लिए यह भी कोशिश करें।

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";
      }
    });
  }
}

3

अपडेट करें

स्पंदन अब एक दृश्यता विजेट है। अपने स्वयं के समाधान को लागू करने के लिए नीचे दिए गए कोड से शुरू करें।


खुद एक विजेट बनाओ।

छुपा हुआ देखना

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);
  }
}

शो / निकालें

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();
  }
}

वैसे, क्या किसी के लिए ऊपर दिए गए विजेट का बेहतर नाम है?


अधिक पढ़ता है

  1. दृश्यता विजेट बनाने के तरीके पर अनुच्छेद

3

जैसा कि पहले ही @CopsOnRoad द्वारा हाइलाइट किया गया है, आप दृश्यता विजेट का उपयोग कर सकते हैं। लेकिन, यदि आप इसका राज्य रखना चाहते हैं, उदाहरण के लिए, यदि आप एक दृश्य-चित्र बनाना चाहते हैं और पृष्ठ के आधार पर एक निश्चित बटन प्रकट और गायब करना चाहते हैं, तो आप इसे इस तरह से कर सकते हैं

void checkVisibilityButton() {
  setState(() {
  isVisibileNextBtn = indexPage + 1 < pages.length;
  });
}    

 Stack(children: <Widget>[
      PageView.builder(
        itemCount: pages.length,
        onPageChanged: (index) {
          indexPage = index;
          checkVisibilityButton();
        },
        itemBuilder: (context, index) {
          return pages[index];
        },
        controller: controller,
      ),
      Container(
        alignment: Alignment.bottomCenter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            Visibility(
              visible: isVisibileNextBtn == true ? true : false,
              child: "your widget"
            )
          ],
        ),
      )
    ]))


-8

एक समाधान के लिए रंग विजेट रंग गुण सेट करने के लिए है। उदाहरण के लिए:

IconButton(
    icon: Image.asset("myImage.png",
        color: Colors.transparent,
    ),
    onPressed: () {},
),

1
एक अच्छा समाधान नहीं है क्योंकि पारदर्शी IconButtonअभी भी क्लिक और स्थान प्राप्त करता है। लोगों द्वारा इसे डाउनवोट करने से पहले कृपया इस उत्तर को संपादित करें या हटाएं।
कोप्सऑनराड
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.