W systemie Android każda View
podklasa ma setVisibility()
metodę, która pozwala modyfikować widoczność View
obiektu
Istnieją 3 opcje ustawienia widoczności:
- Widoczny: renderuje to, co
View
widoczne wewnątrz układu - Niewidoczne: ukrywa
View
, ale pozostawia lukę odpowiadającą temu, coView
zajmowałoby, gdyby było widoczne - Gone: ukrywa
View
i całkowicie usuwa z układu. To tak, jakby to byłoheight
iwidth
było0dp
Czy jest coś równoważnego z powyższym dla widżetów we Flutterze?
Szybkie odniesienie: https://developer.android.com/reference/android/view/View.html#attr_android:visibility
źródło
IgnorePointer
przeciwnym razie użytkownik nadal może go wywołać.Niewidoczny : widget zajmuje fizyczne miejsce na ekranie, ale jest niewidoczny dla użytkownika.
Zniknął : widget nie zajmuje fizycznego miejsca i całkowicie zniknął.
Niewidzialny przykład
Visibility( child: Text("Invisible"), maintainSize: true, maintainAnimation: true, maintainState: true, visible: false, ),
Zniknął przykład
Visibility( child: Text("Gone"), visible: false, ),
Alternatywnie możesz użyć
if
warunku zarówno dla niewidzialnego, jak i znikającego.Column( children: <Widget>[ if (show) Text("This can be visible/not depending on condition"), Text("This is always visible"), ], )
źródło
Współpraca z pytaniem i pokazanie przykładu zastąpienia go pustym
Container()
.Oto przykład poniżej:
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], ), ), ), ], ), ) ), ], ) ], ) ); } }
źródło
Flutter zawiera teraz Widżet Widoczności , którego należy używać do pokazywania / ukrywania widżetów. Widget może być również używany do przełączania się między 2 widżetami poprzez zmianę zamiennika.
Ten widget może osiągnąć dowolny ze stanów widoczny, niewidoczny, zniknął i wiele więcej.
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 ),
źródło
Wypróbuj
Offstage
widżetjeśli atrybut
offstage:true
nie zajmuje fizycznej przestrzeni i jest niewidoczny,jeśli atrybut
offstage:false
zajmie fizyczną przestrzeń i będzie widocznyOffstage( offstage: true, child: Text("Visible"), ),
źródło
Możesz hermetyzować dowolny widżet w swoim kodzie nowym widżetem o nazwie (Widoczność), pochodzi z żółtej lampki po lewej stronie widżetu, aby był widoczny
przykład: powiedz, że chcesz, aby wiersz był niewidoczny:
Element podrzędny nowo utworzonego widżetu (Widżet widoczności) to widżet, który ma być niewidoczny
Visibility( visible: false, child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ SizedBox( width: 10, ), Text("Search", style: TextStyle(fontSize: 20 ),), ], ), ),
Mam nadzieję, że pomoże to komuś w przyszłości
źródło
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(''); },), ), ), ), ), ),
źródło
W Flutter 1.5 i Dart 2.3, aby widoczność zniknęła, możesz ustawić widoczność za pomocą instrukcji if w kolekcji bez konieczności korzystania z pojemników.
na przykład
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; }); },) ], )
źródło
Dla początkujących spróbuj tego też.
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"; } }); } }
źródło
Aktualizacja
Flutter ma teraz widżet Widoczność . Aby wdrożyć własne rozwiązanie, zacznij od poniższego kodu.
Sam stwórz widżet.
Pokaż ukryj
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); } }
pokaż / usuń
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(); } }
Nawiasem mówiąc, czy ktoś ma lepszą nazwę dla powyższych widżetów?
Więcej czyta
źródło
Jak już podkreślono w @CopsOnRoad, możesz użyć widżetu Widoczność. Ale jeśli chcesz zachować jego stan, na przykład, jeśli chcesz zbudować przeglądarkę i sprawić, aby określony przycisk pojawiał się i znikał na podstawie strony, możesz to zrobić w ten sposób
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" ) ], ), ) ]))
źródło
Może możesz użyć funkcji Nawigatora w ten sposób
Navigator.of(context).pop();
źródło
Jednym z rozwiązań jest ustawienie właściwości koloru widgetu tis na Colors.transparent. Na przykład:
IconButton( icon: Image.asset("myImage.png", color: Colors.transparent, ), onPressed: () {}, ),
źródło
IconButton
nadal otrzymuje kliknięcie i zajmuje miejsce. Prosimy zmodyfikować lub usunąć tę odpowiedź, zanim ludzie ją odrzucą.