账号设置页
看实现效果每一条Item可以进行小组件的封装
Visibility组件
是控制子组件隐藏/可见的组件
| 库 | 功能 |
|---|---|
| child | 子组件 |
| replacement | 不可见时显示的组件（当maintainState = false） |
| visible | 子组件是否可见，默认true（可见） |
| maintainState | 不可见时是否维持状态，默认为false |
| maintainAnimation | 不可见时，是否维持子组件中的动画 |
| maintainSize | 不可见时是否留有空间（设置为true，会报错。如果想隐藏并保留组件空间请使用Opacity） |
| maintainSemantics | 不可见时是否维持它的语义（我也没搞明白是什么） |
| maintainInteractivity | 不可见时是否具有交互性 |
代码示例
Visibility(
visible: isRightImage,
child: CircleAvatar(
backgroundImage: getBackgroundImage(rightImageUri),
))
/// 信息设置页Item
class PersonDetailItem extends StatelessWidget {
final Function onTap; //点击事件
final String leftText; //左侧显示文字
final String rightText; //右侧显示文字
final Widget leftIcon; //左侧图片
final bool isRight; //是否显示右侧
final bool isRightImage; //是否显示右侧图片
final String rightImageUri; //右侧图片地址
final bool isRightText; //是否显示右侧文字
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);
}
}
}
网友评论