【问题标题】:How to set the image and text of the check box margin or padding right in flutter如何在颤动中设置复选框边距或填充的图像和文本
【发布时间】:2020-06-26 14:48:37
【问题描述】:

我有一个Check box,如下代码:

DelayedAnimation(
                  child: CheckboxListTile(
                    title: const Text('Check privacy & policy'),
                    value: timeDilation != 1.0,
                    onChanged: (bool value) {
                      setState(() {
                        timeDilation = value ? 5.0 : 1.0;
                      });
                    },
                    secondary: Image.asset(
                      'assets/images/policy_ic.png',
                      height: 30,
                    ),
                  ),
                  delay: delayedAmount + 4500,
                ),

如下图所示:

现在我需要为text 和图像设置填充或边距,如下图所示:

希望有人能帮我解决这个问题。

【问题讨论】:

  • @GabrieleMartini 您发布相同问题的答案在哪里 :)
  • 自动评论。只是发出重复问题的信号(同一个问题被发布两次):)

标签: flutter dart


【解决方案1】:

我会使用一行而不是 CheckboxListTile:

Row(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Image.asset(
        'assets/images/policy_ic.png',
        height: 30,
      ),
      Container(
        margin: EdgeInsets.all(10),
        child: Text(
          'Check privacy & policy',
          style: Theme.of(context).textTheme.headline5,
        ),
      ),
      Checkbox(
          value: timeDilation != 1.0,
          onChanged: (bool value) {
            setState(() {
              timeDilation = value ? 5.0 : 1.0;
            });
          }),
    ],
  )

编辑: 像这样创建一个自定义小部件:

class CustomTile extends StatefulWidget {
  @override
  _CustomTileState createState() => _CustomTileState();
}

class _CustomTileState extends State<CustomTile> {
  bool value = false;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          value = !value;
        });
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Icon(Icons.extension),
          Container(
            margin: EdgeInsets.all(10),
            child: Text(
              'Check privacy & policy',
              style: Theme.of(context).textTheme.headline5,
            ),
          ),
          Checkbox(
            value: value,
            onChanged: (bool value) {},
          )
        ],
      ),
    );
  }
}

【讨论】:

  • 感谢您的帮助,但现在的问题是,复选框是唯一可点击的部分...我需要所有的都是可点击的..我的意思是当点击图标或文本或复选框时将只是一项:D
  • 在此示例代码中,_CustomTileState 是否选中复选框。复选框本身只代表状态。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-03-14
  • 1970-01-01
  • 2015-10-16
  • 2011-05-18
  • 1970-01-01
  • 2021-02-11
相关资源
最近更新 更多