賬號設(shè)置頁
看實(shí)現(xiàn)效果每一條Item可以進(jìn)行小組件的封裝
Visibility組件
是控制子組件隱藏/可見的組件
| 庫 | 功能 |
|---|---|
| child | 子組件 |
| replacement | 不可見時顯示的組件（當(dāng)maintainState = false） |
| visible | 子組件是否可見，默認(rèn)true（可見） |
| maintainState | 不可見時是否維持狀態(tài)，默認(rèn)為false |
| maintainAnimation | 不可見時，是否維持子組件中的動畫 |
| maintainSize | 不可見時是否留有空間（設(shè)置為true，會報錯。如果想隱藏并保留組件空間請使用Opacity） |
| maintainSemantics | 不可見時是否維持它的語義（我也沒搞明白是什么） |
| maintainInteractivity | 不可見時是否具有交互性 |
代碼示例
Visibility(
visible: isRightImage,
child: CircleAvatar(
backgroundImage: getBackgroundImage(rightImageUri),
))
/// 信息設(shè)置頁Item
class PersonDetailItem extends StatelessWidget {
final Function onTap; //點(diǎn)擊事件
final String leftText; //左側(cè)顯示文字
final String rightText; //右側(cè)顯示文字
final Widget leftIcon; //左側(cè)圖片
final bool isRight; //是否顯示右側(cè)
final bool isRightImage; //是否顯示右側(cè)圖片
final String rightImageUri; //右側(cè)圖片地址
final bool isRightText; //是否顯示右側(cè)文字
const PersonDetailItem({
Key key,
this.leftText = "",
this.leftIcon,
this.rightText = "",
this.isRight = true,
this.isRightImage = false,
this.rightImageUri = "",
this.isRightText = true,
this.onTap,
}) : super(key: key);
@override
Widget build(BuildContext context) {
bool isDark = ThemeUtils.isDark(context);
return Container(
width: double.infinity,
height: 50,
child: Material(
color: isDark ? Colours.dark_bg_color : Colours.material_bg,
child: InkWell(
onTap: onTap,
child: Container(
margin: EdgeInsets.only(left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
leftIcon,
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
leftText,
style: TextStyle(fontSize: 15.0, color: Colors.grey),
),
)
]),
//Visibility是控制子組件隱藏/可見的組件
Visibility(
visible: isRight,
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.only(right: 10),
child: Row(children: <Widget>[
Visibility(
visible: isRightText,
child: Text(
rightText,
style: TextStyle(
fontSize: 15.0, color: Colors.grey),
)),
Visibility(
visible: isRightImage,
child: CircleAvatar(
backgroundImage: getBackgroundImage(rightImageUri),
))
]),
),
Images.arrowRight
]),
)
],
),
),
)),
);
}
ImageProvider getBackgroundImage(String rightImageUri){
if(rightImageUri.contains("http")){
return NetworkImage(rightImageUri);
}else{
return AssetImage(rightImageUri);
}
}
}
