Android에서 모든 단일 View하위 클래스에는 객체 setVisibility()의 가시성을 수정할 수 있는 메서드가 있습니다.View
가시성을 설정하는 세 가지 옵션이 있습니다.
- Visible :
View레이아웃 내부에 보이는 것을 렌더링합니다. - 보이지 않음 :을 숨기지
View만View표시되는 경우 차지하는 것과 동일한 간격을 남깁니다. - 사라짐 :을 숨기고
View레이아웃에서 완전히 제거합니다. 그건 마치 그height와width있었다0dp
Flutter의 위젯에 대해 위와 동일한 것이 있습니까?
빠른 참조 :
https://developer.android.com/reference/android/view/View.html#attr_android:visibility
답변
업데이트 :이 답변이 작성 되었으므로이 Visibility문제에 대한 최상의 솔루션을 제공했습니다.
당신은 사용할 수 있습니다 Opacity와 opacity:의 0.0요소가 숨겨져 있지만 여전히 공간을 차지하게 그립니다.
공간을 차지하지 않도록하려면 빈 Container().
편집 : Opacity 개체로 감싸려면 다음을 수행하십시오.
new Opacity(opacity: 0.0, child: new Padding(
padding: const EdgeInsets.only(
left: 16.0,
),
child: new Icon(pencil, color: CupertinoColors.activeBlue),
))Opacity에 대한 Google Developers 빠른 자습서 : https://youtu.be/9hltevOHQBw
답변
Invisible : 위젯이 화면의 물리적 공간을 차지하지만 사용자에게는 보이지 않습니다.
사라짐 : 위젯이 물리적 공간을 차지하지 않고 완전히 사라졌습니다.
보이지 않는 예
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"),
],
) 답변
질문과 공동 작업하고 빈으로 바꾸는 예를 보여줍니다 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],
),
),
),
],
),
)
),
],
)
],
)
);
}
}답변
Flutter는 이제 가시성 위젯을 포함합니다 을 표시 / 숨기기 위해 사용해야 이 있습니다. 위젯을 사용하여 교체를 변경하여 두 위젯간에 전환 할 수도 있습니다.
이 위젯은 보이는 상태, 보이지 않는 상태, 사라진 상태 등을 달성 할 수 있습니다.
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
),답변
Offstage위젯 사용해보기
속성 offstage:true이 물리적 공간을 차지하지 않고 보이지 않는 경우,
속성 offstage:false이면 물리적 공간을 차지하고 표시됩니다.
Offstage(
offstage: true,
child: Text("Visible"),
),답변
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('');
},),
),
),
),
),
),답변
에서 플러터 1.5 및 다트 2.3 가시성이 사라를 위해, 당신은 용기를 사용하지 않고도 컬렉션 내의 if 문을 사용하여 가시성을 설정할 수 있습니다.
예 :
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;
});
},)
],
)