Question

我正在学习使用Flutter，现在我在设计按钮样式时偶然发现了一个问题。即使遵循以下指南和问题，我的样式按钮也可能显示为“错误”，这可能是因为我的代码存在问题。检查按钮的外观：

这是我按钮的代码（问题就在那里，因为它甚至只显示按钮就发生了），我认为问题出在我里面的容器中，这可能是错误的，但我无法解决找到问题：

 RaisedButton(
            onPressed: () {},
            textColor: Colors.white,
            shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(30.0),
            ),
            child: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: <Color>[
                    Colors.purple,
                    Color.fromARGB(1, 247, 120, 150),
                  ],
                ),
              ),
              padding: const EdgeInsets.all(20.0),
              child: const Text('Empezar partida',
                  style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                      fontWeight: FontWeight.bold)),
            ),
          )

Answer 1

检查此代码

RaisedButton(
 padding: const EdgeInsets.all(0.0),
   shape: RoundedRectangleBorder(
   borderRadius: BorderRadius.circular(30.0),),
  onPressed: () {},
  textColor: Colors.white,
  child: Container(
    decoration: const BoxDecoration(
      shape: BoxShape.rectangle,
      borderRadius: BorderRadius.all(Radius.circular(30)),
      gradient: LinearGradient(
        colors: <Color>[
          Colors.purple,
          Color.fromARGB(1, 247, 120, 150),
        ],
      ),
    ),
    padding: const EdgeInsets.all(20.0),
    child: const Text('Empezar partida',
        style: TextStyle(
            fontSize: 20,
            color: Colors.white,
            fontWeight: FontWeight.bold)),
  ),
),

Answer 2

尝试此代码。

Container(
             height: 50.0,
             margin: EdgeInsets.all(10),
             child: RaisedButton(
               onPressed: () {},
               shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(80.0)),
               padding: EdgeInsets.all(0.0),
               child: Ink(
                 decoration: BoxDecoration(
                     gradient: LinearGradient(
                       colors: [Color(0xff374ABE), Color(0xff64B6FF)],
                       begin: Alignment.centerLeft,
                       end: Alignment.centerRight,
                     ),
                     borderRadius: BorderRadius.circular(30.0)),
                 child: Container(
                   constraints:
                       BoxConstraints(maxWidth: 250.0, minHeight: 50.0),
                   alignment: Alignment.center,
                   child: Text(
                     "Gradient Button",
                     textAlign: TextAlign.center,
                     style: TextStyle(color: Colors.white, fontSize: 15),
                   ),
                 ),
               ),
             ),
           ),

使用墨水小部件在按钮中绘制渐变。 https://api.flutter.dev/flutter/material/Ink-class.html

Answer 3

借助@AshwithSaldanha和@VarunKamani的解决方案（您有我的支持！），我设法找到了一种可以很好地解决问题的解决方案：我只在我的Container（）中使用EdgeInsets.only。（），并提供以下参数对其进行修复：

padding: EdgeInsets.only(left: 27.0, top: 19, bottom: 19, right: 27)

这仅在RaisedButton（）的填充为0时有效：

padding: const EdgeInsets.all(0.0)

最终代码如下：

      RaisedButton(
        padding: const EdgeInsets.all(0.0),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),
        onPressed: () {},
        textColor: Colors.white,
        child: Container(
          decoration: const BoxDecoration(
            shape: BoxShape.rectangle,
            borderRadius: BorderRadius.all(Radius.circular(30)),
            gradient: LinearGradient(
              colors: <Color>[
                Colors.purple,
                Color.fromARGB(1, 247, 120, 150),
              ],
            ),
          ),
          padding:
              EdgeInsets.only(left: 27.0, top: 19, bottom: 19, right: 27),
          child: const Text('Empezar partida',
              style: TextStyle(
                  fontSize: 21,
                  color: Colors.white,
                  fontWeight: FontWeight.bold)),
        ),
      ),

这是它的外观：

Flutter RaisedButton无法正确取整

3 个答案: