Flutter：为提升的按钮添加边框

前端开发 1年前 87

在 Flutter 中，您可以使用ElevatedButton.styleFrom() 静态方法为提升按钮添加边框（并自定义其粗细和颜色），如下所示：

ElevatedButton(
     style: ElevatedButton.styleFrom(
            side: const BorderSide(
                width: 2, // the thickness
                color: Colors.black // the color of the border
            )
     ),     
     /* ... */
),

如果您需要创建圆形边框，请使用以下实现：

ElevatedButton(
       style: ElevatedButton.styleFrom(
              shape: RoundedRectangleBorder(
                      side: const BorderSide(
                              width: 8, // thickness
                              color: Colors.deepPurple // color
                      ),
                      // border radius
                      borderRadius: BorderRadius.circular(16) 
              )
        ),
        /* ... */
),

让我们检查下面的具体示例以更清楚。

Flutter：为提升的按钮添加边框

代码：

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Button One (a rectangular button)
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  side: const BorderSide(width: 2, color: Colors.black),
                  primary: Colors.amber,
                  padding:
                      const EdgeInsets.symmetric(vertical: 10, horizontal: 30)),
              child: const Text(
                'Button One',
                style: TextStyle(color: Colors.black, fontSize: 20),
              ),
            ),
            const SizedBox(
              height: 30,
            ),

            // Button Two (a pill button)
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  side: const BorderSide(width: 5, color: Colors.red),
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(30)),
                  primary: Colors.black,
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 50)),
              child: const Text(
                'Button Two',
                style: TextStyle(fontSize: 20, color: Colors.white),
              ),
            ),
            const SizedBox(
              height: 30,
            ),

            // Button Three (a rounded button)
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      side:
                          const BorderSide(width: 8, color: Colors.deepPurple),
                      borderRadius: BorderRadius.circular(16)),
                  primary: Colors.orangeAccent,
                  padding:
                      const EdgeInsets.symmetric(vertical: 20, horizontal: 80)),
              child: const Text(
                'Button Three',
                style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.deepPurple),
              ),
            ),
          ],
),