flutter 学习笔记之写一个通用的设置页面

最新推荐文章于 2024-09-02 08:47:54 发布

原谅我这一生放纵不羁笑点低

最新推荐文章于 2024-09-02 08:47:54 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： flutter开发学习笔记文章标签： flutter 设置通用设置页代码片段方便以后开发使用

本文链接：https://blog.csdn.net/July_sal/article/details/95192871

学习笔记同时被 2 个专栏收录

23 篇文章

订阅专栏

flutter开发

14 篇文章

订阅专栏

这篇博客分享了如何在Flutter中编写一个通用的设置页面组件。通过源码链接和核心代码展示，作者封装了一个小控件，该控件支持自定义左侧图标和文字，右侧文字及可选箭头，并默认显示下划线。此代码片段适用于未来开发中的设置页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码https://github.com/AnleSu/select_text_item

效果图：

核心code：

Widget build(BuildContext context) {
    return GestureDetector(
      onTap: this.onTap,
      child: Container(
        height: this.height ?? 50.0,
        margin: EdgeInsets.only(left: 16, right: 16),
        width: double.infinity,
        decoration: BoxDecoration(
            border: Border(
                //下面的分割线 width 这个参数应该是控制分割线高度的
                bottom: Divider.createBorderSide(context,
                    color: Color(0xFFEEEEEE), width: 1))),
        child: Row(
          children: <Widget>[
            this.imageName == null
                ? Container()
                : Image.asset(
                    '${this.imageName}',
                    width: 22,
                    height: 22,
                  ),
            Text(this.title,
                style: this.titleStyle ??
                    new TextStyle(
                      color: Color(0xFF333333),
                      fontSize: 14.0,
                    )),
            Expanded(
              child: Container(
                padding: EdgeInsets.only(left: 16, right: 16),
                child: Text(this.content,
                    textAlign: this.textAlign,
                    overflow: TextOverflow.ellipsis,
                    style: this.contentStyle ??
                        new TextStyle(
                          fontSize: 14.0,
                          color: Color(0xFFCCCCCC),
                        )),
              ),
            ),
            //这里为了方便用了系统icon 可以设置一张arrow 的图片
            // Image.asset(
            //   '',
            //   width: 16,
            //   height: 16,
            // )
            this.isShowArrow
                ? Icon(
                    Icons.arrow_forward_ios,
                    size: 16,
                  )
                : Container(),
          ],
        ),
      ),
    );
  }

封装了一个简单的小控件，支持设置左侧的图片和文字，右侧的文字和箭头是否显示，默认显示下面的横线

test code：

SelectTextItem(
            title: '密保手机号',
            content: '131****3987',
            textAlign: TextAlign.end,
            contentStyle: new TextStyle(
              fontSize: 15,
              color: Color(0xFF333333),
            ),
          ),