প্রোগ্রামিমে ফ্লার্টে উইজেটগুলি দেখান / লুকান


133

অ্যান্ড্রয়েড সালে প্রতি একক Viewউপশ্রেণী টি setVisibility()পদ্ধতি যে আপনি একটি দৃশ্যমানতা পরিবর্তন পারবেন Viewবস্তুর

দৃশ্যমানতা সেট করার জন্য 3 টি বিকল্প রয়েছে:

  • দৃশ্যমান: Viewলেআউটের ভিতরে দৃশ্যমান রেন্ডার করে
  • অদৃশ্য: এটি লুকিয়ে রাখে View, তবে এমন ফাঁক ফেলে দেয় যা Viewদৃশ্যমান হলে এটি কী দখল করবে তার সমান
  • গেছে: লুকিয়ে রাখে Viewএবং পুরোপুরি বিন্যাস থেকে সরিয়ে দেয়। এটি যেমন এটি heightএবং widthছিল0dp

ওঠানামায় উইজেটগুলির জন্য কি উপরের সমতুল্য কিছু আছে?

দ্রুত রেফারেন্সের জন্য: https://developer.android.com/references/android/view/View.html#attr_android:visibility

উত্তর:


90

আপডেট: যেহেতু এই উত্তরটি লেখা 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),
            ))

গুগল বিকাশকারীদের অস্পষ্টতার বিষয়ে দ্রুত টিউটোরিয়াল: https://youtu.be/9hltevOHQBw


4
ধন্যবাদ! হ্যাঁ এটি করার সবচেয়ে পরিষ্কার উপায় নয় তবে এটি অবশ্যই উদ্দেশ্যটি করবে। ভবিষ্যতে উইজেটগুলির সাথে সমন্বিত দৃশ্যমানতার কার্যকারিতা পাওয়ার কোনও সুযোগ?
ব্যবহারকারী3217522

4
যদি উইজেটটি সাধারণত ব্যবহারকারী ইনপুটকে প্রতিক্রিয়া জানায় তবে এটিকে এগুলি মুছতে ভুলবেন না IgnorePointer, অন্যথায় ব্যবহারকারী এখনও এটি ট্রিগার করতে পারে।
ডানকান জোন্স

4
এটি আদর্শ নয়, যেহেতু উইজেটটি এখনও আছে এবং এটি ট্যাপসগুলিতে প্রতিক্রিয়া জানাতে পারে handle এটিকে হ্যান্ডল করার সর্বোত্তম উপায়ের জন্য ভিজিবিলিটি উইজেট ব্যবহার করে নীচের উত্তর দেখুন।
রাসেল জোর্নেস

মতামতগুলি উপরের দিকে যেমন বলেছে, অস্বচ্ছতা ব্যবহার করা উইজেটকে রেন্ডারট্রিতে রেন্ডার করবে, কিছু ক্ষেত্রে আপনি যা চান তা তা নয়। দৃশ্যমানতা উইজেট ব্যবহার করা বাঞ্ছনীয়।
ইসাক মৌরা

একটি অদৃশ্য উইজেট তৈরি করা এবং অস্বচ্ছতা0 হওয়া দুটি আলাদা জিনিস। অদৃশ্য উইজেট সহ আপনি এখনও এটির সাথে ইন্টারঅ্যাক্ট করতে পারেন, এটি কেবল অদৃশ্য। দৃশ্যমানতা উইজেট আপনাকে প্রয়োজন পর্যন্ত উইজেটটি সরাতে দেয়।
আন্ডারকভারকোডার

193

অদৃশ্য : উইজেট স্ক্রিনে শারীরিক স্থান নেয় তবে ব্যবহারকারীর কাছে দৃশ্যমান নয়।

গেছে : উইজেট কোনও শারীরিক স্থান নেয় না এবং সম্পূর্ণভাবে চলে গেছে is


অদৃশ্য উদাহরণ

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

20
সেই 'যদি' শর্তটি নিখুঁত!
জনক

এখানে অন্য শর্তটি কীভাবে ব্যবহার করবেন?
দ্রুত শিক্ষার্থী

@ কিউক্লিয়ারার আপনি ব্যবহার করতে পারেনif(show) Text('Showing) else Text('Not showing)
পুলিশঅনরোড করুন

63

প্রশ্নের সাথে সহযোগিতা করতে এবং খালি দিয়ে প্রতিস্থাপনের একটি উদাহরণ দেখানো 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],
                          ),
                        ),
                      ),
                    ],
                  ),
                )
              ),
            ],
          )                    
        ],
      )
    );
  }
}

4
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি "প্রোগ্রামের মাধ্যমে উইজেটগুলি দেখান / আড়াল করুন" এর সঠিক বাস্তবায়ন
বিশ্বজ্যোতি রায়

হ্যাঁ এটি অবশ্যই গ্রহণযোগ্য হওয়া উচিত কারণ এটি ফ্লাটারের একটি ভিত্তি স্তম্ভ অর্থাৎ সেটস্টেট () ব্যবহার করে ... অন্যথায় আপনি কীভাবে আপনার স্টেটফুল উইজেটে দৃশ্যমান / ইনভিজিবল এর মাঝে পিছনে যেতে যাচ্ছেন!?।
ইয়ো অ্যাপস

29

ঝাঁকুনিতে এখন একটি ভিজিবিলিটি উইজেট রয়েছে যা আপনার উইজেটগুলি প্রদর্শন / আড়াল করতে ব্যবহার করা উচিত। উইজেটটি প্রতিস্থাপনটি পরিবর্তন করে 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
    ),

21

Offstageউইজেট চেষ্টা করুন

যদি অ্যাট্রিবিউটটি offstage:trueশারীরিক স্থান এবং অদৃশ্য দখল করে না,

যদি অ্যাট্রিবিউট offstage:falseএটি দৈহিক স্থান দখল করে এবং দৃশ্যমান হয়

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

এটিতে নোট করুন: ফ্লার্ট ডক্স জানিয়েছে , "উইজেটের স্ক্রিনে না আনাই অফস্টেজটি মাত্রা মাপতে ব্যবহার করা যেতে পারে (ততক্ষণ) a উইজেট যখন প্রয়োজন হয় না তখন তাকে লুকানোর জন্য, গাছ থেকে পুরোপুরি উইজেট অপসারণকে পছন্দ করুন এটি অফস্টেজ সাবট্রিতে বাঁচিয়ে রাখার চেয়ে ""
lukeic

13

আপনি আপনার কোডের যে কোনও উইজেটকে একটি নতুন উইজেট (ভিজিবিলিটি) সহ এনপ্যাপুলেট করতে পারেন, এটি উইজেটের একেবারে বাম পাশে হলুদ প্রদীপ থেকে এটি যে আপনি এটি দৃশ্যমান হতে চান

উদাহরণ: বলুন যে আপনি একটি সারি অদৃশ্য করতে চান:

  1. প্রদীপে ক্লিক করুন এবং চয়ন করুন (উইজেটের সাথে মোড়ানো)
  2. উইজেটটির দৃশ্যমানতায় নতুন নামকরণ করুন
  3. দৃশ্যমান সম্পত্তি যুক্ত করুন এবং এটি মিথ্যাতে সেট করুন
  4. নতুন তৈরি উইজেটের চাইল্ড (ভিজিবিলিটি উইজেট) আপনি যে উইজেটটি চান সেটি অদৃশ্য হোক

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

আমি আশা করি এটি ভবিষ্যতে কাউকে সহায়তা করবে


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

          ],
        )

এটি এত আগের চেয়ে ভাল আগের বিকল্পগুলি / ডার্ট সংস্করণে বিকল্পগুলি পাওয়া যায় available ধন্যবাদ!
হাতুড়ি

5

নতুনদের জন্য এটিও চেষ্টা করে দেখুন try

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

5

হালনাগাদ

ঝাঁকুনির এখন একটি ভিজিবিলি উইজেট রয়েছে। আপনার নিজের সমাধানটি কার্যকর করতে নীচের কোড দিয়ে শুরু করুন।


নিজেই একটি উইজেট তৈরি করুন।

দেখান / লুকান

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: () {},
),

4
কোনও ভাল সমাধান নয় কারণ স্বচ্ছ IconButtonএখনও ক্লিক এবং স্থান দখল করে। লোকেরা এটিকে নিচে নামানোর আগে দয়া করে এটিকে সম্পাদনা বা মুছুন।
কপসঅনরোড
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.