flutter 學習筆記之寫一個通用的設置頁面

源碼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),
            ),
          ),