微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Flutter 中的自定义 Gauge 设计

如何解决Flutter 中的自定义 Gauge 设计

我想实现以下设计:

enter image description here

为此,我使用了 LinearGauge。但是在 Gauge 中有 CellData,它不允许我添加 Widget 或能够改变 CellData 的形状。请分享我如何设计这个。任何参考都非常有帮助。

解决方法

试试这个:

  Widget _guage(int index) {
    List<Widget> _items = [];
    List<String> _status = ['V Bad','Bad','OK','Good','V Good'];

    for (int i = 0; i < _status.length; i++) {
      _items.add(
        Expanded(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,crossAxisAlignment: CrossAxisAlignment.center,children: [
              Container(
                height: 50,child: i == index ? Icon(Icons.pin) : SizedBox(),),Container(
                decoration: BoxDecoration(
                  color:
                      Colors.yellow.withOpacity(1 / (_status.length - i + 1)),borderRadius: BorderRadius.circular(5),height: 10 + (i.toDouble()*2),Text(_status[i]),],);
    }

    return Row(
      children: _items,);
  }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。