Блог

Главная - Вопросы по программированию - Чтобы нарисовать флажок в dart, лучше использовать класс paint или что-то в этом роде, или есть какие-то другие идеи без использования класса `checkBox

Чтобы нарисовать флажок в dart, лучше использовать класс paint или что-то в этом роде, или есть какие-то другие идеи без использования класса `checkBox

#flutter

Вопрос:

Можно ли нарисовать checkbox дротик с помощью paint class дротика или что-то в этом роде? Мне не нравится сложность настройки текущего официального checkBox файла, когда всегда приходится оборачивать его materials библиотекой. Моя идея состоит в том, чтобы нарисовать квадрат с customPaint классом и stack positioning tick значком в середине и поместить a gesture detector для обнаружения кликов, чтобы проверить и снять флажок tick ? Есть ли какой-нибудь другой элегантный способ сделать это? Есть идеи?

Комментарии:

1. Да, это возможно, как вы описываете, вы можете использовать customPaint ClipPath или Stack на основе вашего дизайна. Но являются ли те вещи, которые вы хотели бы иметь на официальном флажке?

2. смотрите ToggleableStateMixin и ToggleablePainter — миксин используется _MaterialSwitchState , _CheckboxState и _RadioState

3. Зачем создавать что-то новое, когда уже есть лучшее решение?. «Мне не нравится сложность настройки текущего официального флажка, когда всегда приходится оборачивать его библиотекой материалов». Как вы уже упоминали здесь, вы можете просто сделать его пользовательским виджетом, в котором вы меняете виджет по своему вкусу.

4. Вы также можете просто создать StatefulWidget объект с isSelected состоянием, которое меняется при нажатии, и показывать разные значки в зависимости от состояния. На мой взгляд, обычная краска была бы излишеством.

5. @YeasinSheikh спасибо за предложение clippath. 🙂

Ответ №1:

введите описание изображения здесь

введите описание изображения здесь

Пожалуйста, обратитесь к приведенному ниже коду

 class _CustomCheckBoxState extends State<CustomCheckBox> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text(
                  "Custom Check Box",
                ),
                InkWell(
                  onTap: () {
                    setState(() {
                      isChecked = !isChecked;
                    });
                  },
                  child: Container(
                    width: 20.0,
                    height: 20.0,
                    padding: EdgeInsets.symmetric(
                      vertical: 0.7,
                      horizontal: 0.7,
                    ),
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(64, 212, 232, 0.18),
                      border: Border.all(
                        width: 1,
                        color: Color(0xff40D4E8),
                      ),
                      borderRadius: BorderRadius.circular(4.0),
                    ),
                    child: (isChecked == true)
                        ? Center(
                            child: Icon(
                              Icons.check,
                              color: Colors.black,
                              size: 16.0,
                            ),
                          )
                        : Container(),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
Метки: , ,