flutter - Flutter 中的自定义仪表设计

Question

我想实现以下设计：

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

标签： flutterflutter-layoutgauge

Answer 1

尝试这个：

  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,
    );
  }