Flutter 中的自定义 Gauge 设计

问题描述

我想实现以下设计：

为此，我使用了 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,);
  }