flutter 如何将图标完全对齐在圆形按钮之间?

clj7thdc  于 2022-12-14  发布在  Flutter
关注(0)|答案(3)|浏览(194)
Container(
    height: 55,
    width: 55,
    decoration: const BoxDecoration(
        shape: BoxShape.circle,
        border: Border.symmetric(
          horizontal: BorderSide(
            color: Colors.black,
            width: 2.0,
            style: BorderStyle.solid,
          ),
          vertical: BorderSide(
            color: Colors.black,
            width: 2.0,
            style: BorderStyle.solid,
          ),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            offset: Offset(3.5, 3.5),
            blurRadius: 0,
            spreadRadius: -1,
          ),
        ]),
    child: OutlinedButton(
      onPressed: () {
        _controller.forward();
        widget.onPress();
      },
      style: const ButtonStyle(
        alignment: Alignment.centerLeft,
        backgroundColor: MaterialStatePropertyAll(Colors.white),
        shape: MaterialStatePropertyAll(CircleBorder()),
      ),
      child: const Icon(
        Icons.view_carousel_outlined,
        size: 35,
        color: Colors.black,
      ),
    ),
  ),

您可以看到图标没有正确对齐...

我已经尝试了所有可能的方法,我使用了堆栈,定位,试图给予它一个填充,边距等。试图把它放在boxfit和尝试其他一切,任何想法为什么会发生这种情况?

odopli94

odopli941#

将对齐方式更改为Alignment.center并使用EdgeInsets.zero对我来说工作得很好。

Container(
            height: 55,
            width: 55,
            decoration: const BoxDecoration(
              shape: BoxShape.circle,
              border: Border.symmetric(
                horizontal: BorderSide(
                  color: Colors.black,
                  width: 2.0,
                  style: BorderStyle.solid,
                ),
                vertical: BorderSide(
                  color: Colors.black,
                  width: 2.0,
                  style: BorderStyle.solid,
                ),
              ),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: Offset(3.5, 3.5),
                  blurRadius: 0,
                  spreadRadius: -1,
                ),
              ],
            ),
            child: OutlinedButton(
              onPressed: () {
                /*  _controller.forward();
                          widget.onPress(); */
              },
              style: const ButtonStyle(
                alignment: Alignment.center,
                padding: MaterialStatePropertyAll(EdgeInsets.zero),
                backgroundColor: MaterialStatePropertyAll(Colors.white),
                shape: MaterialStatePropertyAll(CircleBorder()),
              ),
              child: const Icon(
                Icons.view_carousel_outlined,
                size: 35,
                color: Colors.black,
              ),
            ),
          ),
qoefvg9y

qoefvg9y2#

好的,所以我修复了它,基本上删除了容器中的很多样式,并在轮廓按钮本身中对边框进行了样式化。
下面是代码:

Container(
      decoration: const BoxDecoration(shape: BoxShape.circle, boxShadow: [
        BoxShadow(
          color: Colors.black,
          offset: Offset(3.5, 3.5),
          blurRadius: 0,
          spreadRadius: -1,
        ),
      ]),
      child: OutlinedButton(
        onPressed: () {
          _controller.forward();
          widget.onPress();
        },
        style: const ButtonStyle(
          side: MaterialStatePropertyAll(BorderSide(width: 2.0)),
          padding: MaterialStatePropertyAll(EdgeInsets.all(20.0)),
          backgroundColor: MaterialStatePropertyAll(Colors.white),
          shape: MaterialStatePropertyAll(CircleBorder()),
        ),
        child: const Icon(
          Icons.view_carousel_outlined,
          size: 35,
          color: Colors.black,
        ),
      ),
    ),
iq3niunx

iq3niunx3#

OutlinedButton有它自己的约束、边距、填充、tapTargetSize、visualDensity,因此,您的子对象在它内部不会居中。因此,要获得所需的UI代码段,请修改此属性或将图标居中并使用InkWell实现onTap()功能
代码:

Container(
              height: 55,
              width: 55,
              decoration: const BoxDecoration(
                  color: Colors.white, //TODO: Add Color to Container
                  shape: BoxShape.circle,
                  border: Border.symmetric(
                    horizontal: BorderSide(
                      color: Colors.black,
                      width: 2.0,
                      style: BorderStyle.solid,
                    ),
                    vertical: BorderSide(
                      color: Colors.black,
                      width: 2.0,
                      style: BorderStyle.solid,
                    ),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black,
                      offset: Offset(3.5, 3.5),
                      blurRadius: 0,
                      spreadRadius: -1,
                    ),
                  ]),
              child: InkWell( //TODO: Replace OutlinedButton with InkWell
                onTap: () {
                  _controller.forward();
                  widget.onPress();
                },
                child: const Center( //TODO: Wrap Icon with Center
                  child: Icon(
                    Icons.view_carousel_outlined,
                    // size: 35,
                    color: Colors.black,
                  ),
                ),
              ),
            ),

输出:

相关问题