如何在 Flutter 中創建同時具有 kg 和 lbs 選項的 Cupertino 選擇器

Question

我正在嘗試創建一個 Cupertino Picker，它將顯示重量和其他選項，例如 kg 和 lb。我已經嘗試解決了。 它適用於"kg"但我如何顯示"lb"以及如何在選擇 55 kg 后獲得並顯示相同的 121.245 lb 反之亦然，因此兩個值應該相等，例如55 kg = 121.254 lb

這是我的代碼

// weight - 22.0 to 227.0 kg

  // weight declarations
  var _selectedWeight = 150;
  var _selectedWeightDecimals = 0;
  var _selectedUnits = "lbs";
  var units = ['kgs', 'lbs'];
  var lbs = [];
  var kgs = []; 

@override
  void initState() {
    

    for (int j = 22; j <= 227; j++) {
      kgs.add(j);
      lbs.add(j * 2.20462);
    }
  }



//Selection dropdown for Kgs and Lbs

            const SizedBox(height: 15),
            const Text(
              'WEIGHT',
              style: TextConstants.feildHeadText,
            ),
            const SizedBox(
              height: 2,
            ),
            Container(
              height: 51,
              width: double.infinity,
              padding: const EdgeInsets.only(left: 10, right: 10),
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(40)),
                border: Border.all(
                  color: Colors.grey,
                  width: 1,
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  CupertinoButton(
                    onPressed: () {
                      showModalBottomSheet(
                        context: context,
                        builder: (BuildContext context) {
                          return SizedBox(
                            height: 200,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Expanded(
                                  child: CupertinoPicker(
                                    itemExtent: 32,
                                    onSelectedItemChanged: (int index) {
                                      if (_formKey.currentState!.validate()) {
                                        const Text(
                                          "Please select Weight",
                                          style: TextStyle(
                                            color: Colors.red,
                                            fontSize: 16,
                                          ),
                                        );
                                      }
                                      setState(
                                        () {
                                          _selectedWeight = kgs[index];
                                        },
                                      );
                                    },
                                    children: List<Widget>.generate(
                                      kgs.length,
                                      (int index) {
                                        return Center(
                                          child: Text(kgs[index].toString()),
                                        );
                                      },
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: CupertinoPicker(
                                    itemExtent: 32,
                                    onSelectedItemChanged: (int index) {
                                      if (_formKey.currentState!.validate()) {
                                        const Text(
                                          "Please select Units",
                                          style: TextStyle(
                                            color: Colors.red,
                                            fontSize: 16,
                                          ),
                                        );
                                      }
                                      setState(
                                        () {
                                          _selectedUnits = units[index];
                                        },
                                      );
                                    },
                                    children: List<Widget>.generate(
                                      units.length,
                                      (int index) {
                                        return Center(
                                          child: Text(units[index]),
                                        );
                                      },
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      );
                    },
                    child: Text(
                      '$_selectedWeight.$_selectedWeightDecimals  $_selectedUnits',
                      style: const TextStyle(
                        height: 1,
                        color: Colors.black,
                        fontSize: 16,
                      ),
                    ),
                  ),
                  SvgPicture.asset(
                    'assets/icons/dropdown.svg',
                  ),
                ],
              ),
            ),

我的結果是

如何獲得磅值和如上所述

預期結果如下

Answer 1

您必須確保您正在重建CupertinoPicker的權重。 為此，首先，將_selectedUnits ValueNotifier 。

final _selectedUnits = ValueNotifier('lbs');

然后包裹重量CupertinoPicker在ValueListenableBuilder ，檢查的值_selectedUnits以確定在LIS中顯示哪些值。

Expanded(
  child: ValueListenableBuilder<String>(
    valueListenable: _selectedUnits,
    builder: (context, selectedUnits, _) {
      return CupertinoPicker(
        itemExtent: 32,
        onSelectedItemChanged: (int index) {
          if (_formKey.currentState!.validate()) {
            const Text("Please select Weight",
              style: TextStyle(
                color: Colors.red,
                fontSize: 16,
              ),
            );
          }
          setState(
            () {
              _selectedWeight = kgs[index];
            },
          );
        },
        children: List<Widget>.generate(
          kgs.length,
          (int index) {
            return Center(
              child: Text(
                '${selectedUnits == 'kgs' ? kgs[index] : lbs[index]}'),
            );
          },
        ),
      );
  }),
),

最后，將您單元CupertinoPicker的onSelectedItemChanged的setState調用替換為

_selectedUnits.value = units[index];