【问题标题】:How to code add button like zoom at in Flutter如何在 Flutter 中编码添加按钮,如放大
【发布时间】:2019-07-12 05:52:10
【问题描述】:

我需要实现一个像缩放一样的按钮,当我们点击“+”时,值应该增加,当我们点击“-”时,值应该减少,计算值应该显示在“+”的中间" 和 "-" 在按钮上。

RawMaterialButton(
  fillColor: Colors.green,
    splashColor: Colors.greenAccent,

    onPressed: onPressed,
    shape:const StadiumBorder(),

    child: Padding(
      padding: const EdgeInsets.all(3.0),
      child: Row(
        children: <Widget>[
          const Icon(
            Icons.add,
            color: Colors.white,
          ),

          Padding(
            padding: const EdgeInsets.all(8.0),
            child:  Text("ADD",
                    style: TextStyle(
                      color: Colors.white,
                    ),
            ),
          ),
          const Icon(
            Icons.remove,
            color: Colors.white,
          )
        ],
      ),
    ));

**但是我不知道如何创建两个不同的按钮 我只需要设计部分**

【问题讨论】:

标签: flutter dart


【解决方案1】:

你可以连续使用 IconData(-), Text(5) 和 IconData(+) 像:

Row(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Expanded(
          child: Material(
        child: IconButton(
            icon: Icon(Icons.remove_circle_outline,
                color: Colors.black),
            onPressed: () {
              _decrementValue(value);
            }),
      )),
      Expanded(
          child: Text(
        '${value}',
        textAlign: TextAlign.center,
      )),
      Expanded(
          child: Material(
        child: IconButton(
            icon: Icon(Icons.add_circle_outline,
                color: Colors.black),
            onPressed: () {
              _incrementValue(value);
            }),
      )),
    ],
  ),
)

并且在 _incrementValue() 和 _decrementValue() 方法中,您可以使用您的逻辑。

【讨论】:

  • 谢谢先生,我如何添加背景颜色等,如果您使用 zomato 或 swiggy,当我们将任何项目添加到我们的卡片时,按钮会从“添加 +”更改为“-1 +”这是如何工作的
  • @ShubhamHingne 这是逻辑部分。在 _decrementValue() 中,可以检查值是否为 0,然后将 - 按钮的 Visibility 设置为 false 或者当值 >0 时,将可见性设置为 true。在执行所有这些操作时,请使用 setState() 方法。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-11-08
  • 1970-01-01
  • 2020-04-07
  • 2019-02-14
  • 2023-02-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多