产品设计要求

效果1

image.png

效果2

image.png

技术参数

实现代码

采用-ListTile来实现效果1

return ListTile(
      isThreeLine: true,
      //子// item的是否为三行
      dense: false,

      leading: new CircleAvatar(
        child: new Text("待",
            style: new TextStyle(color: Colors.red, fontSize: 12.0)),
      ),
      //左侧首字母图标显示，不显示则传null
      title: Text(
        data.text,
        style: const TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
      //子item的标题
      subtitle: Text("${data.groupText} ",
          style: const TextStyle(color: Colors.black)),
      //子item的内容
      // trailing:
      //     Icon(
      //       Icons.keyboard_arrow_right,
      //       color: Color(0xff909399),
      //     ),
      trailing: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(data.dataCount.toString(),style: TextStyle(
            fontSize: 22,fontWeight: FontWeight.w400
          ),),
          Icon(
            Icons.keyboard_arrow_right,
            color: Color(0xff909399),
            size: 28,
          )
        ],
      ),
      onTap: () {
        String url = data.url;
        // 判断不为空
        if (url.isNotEmpty) {
          // str is not empty, do something
          //Navigator.of(context).pushNamed(url);
          Navigator.pushNamed(context, url);
        } else {
          L.i("todoItem.url is null"); //待办
        }
      }, //显示右侧的箭头，不显示则传null
    );

实现效果2

采用Positioned来实现气泡效果

  Widget buildWithBubble(BuildContext context) {

    //根据数值的位数动态设置气泡的宽度
    double bubble_width=30;
    if(data.bubbleCount<10){
      bubble_width=16;
    }else if(data.bubbleCount<100){
      bubble_width=22;
    }

    return GestureDetector(
      child: Expanded(
        child:Container(
        //height: 30,
        //width: 20,
        decoration: new BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
        ),
        child: Container(
          decoration: new BoxDecoration(color: Colors.white,
            borderRadius: BorderRadius.all(Radius.circular(5.0)),),
          child: Column(
            children: <Widget>[
              Stack(
                children: <Widget>[
                  Container(
                    height: 53,width: 50,
                    padding: EdgeInsets.only(top: 0),
                    margin: EdgeInsets.only(top: 8, left: 20, right: 20,bottom: 0),
                    child: IconButton(
                      padding: EdgeInsets.all(0),
                      icon: _getIcon(data),
                      iconSize: 248, onPressed: () {  },
                    ),
                  ),
                  Positioned(
                    left: 17,
                    top: 8,
                    child: Offstage(
                      offstage: data.bubbleCount == 0,
                      child: Container(
                        margin: EdgeInsets.only(left: 32),
                        width: bubble_width,
                        height: 15,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(3),
                              bottomRight: Radius.circular(3),
                              topRight: Radius.circular(3)),
                          color: Color(0xFFFF491C),
                        ),
                        child: Text(
                          data.bubbleCount >= 100 ? '99+' : data.bubbleCount.toString(),
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 12,
                              fontWeight: FontWeight.w500),
                        ),
                      ),
                    ),
                  )
                ],
              ),
              Container(
                //color: Colors.white,
                width: 50,
                margin: EdgeInsets.only(top: 0),
                child: Expanded(child:Text(
                  data.text,
                  //textAlign: TextAlign.center,
                  overflow: TextOverflow.ellipsis,
                  maxLines: 1,
                  style: TextStyle(
                      fontSize: 12,
                      color: Colors.black,
                      fontWeight: FontWeight.w500),
                ),
              ),),
            ],
          ),
        ),
      ),
      ),
      onTap: () {

      },
    );
  }