Question

我正在尝试为我的家庭自动化项目个性化RaisedButton的内容，为此我向Button添加了不同类型的文本和图标。但由于某种原因，我溢出了1个像素。

ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: SizedBox(
                width: 90.0,
                height: 90.0,
                child: RaisedButton(
                  onPressed: () {},
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Icon(Icons.stay_primary_portrait),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: <Widget>[
                          Padding(
                            padding: EdgeInsets.only(left: 0),
                            child: Text('Lock'),
                          ),
                          Padding(
                            padding: EdgeInsets.only(left: 0),
                            child: Text('100%'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ),

该应用程序：

Answer 1

RaisedButton具有一些默认填充。通过删除默认的填充来修复它。可以正常运行，请检查一下。

     ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: SizedBox(
            width: 90.0,
            height: 90.0,
            child: RaisedButton(
              // remove the default padding the raised button has 
              padding: EdgeInsets.zero,
              onPressed: () {},
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Icon(Icons.stay_primary_portrait),
                  Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(left: 0),
                        child: Text('Lock'),
                      ),
                      Padding(
                        padding: EdgeInsets.only(left: 0),
                        child: Text('100%'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),

输出看起来像这样 Screenshot

Answer 2

我不知道为什么会得到这个结果，但是可以使用InkWell + Container代替RaisedButton：

ClipRRect(
                    borderRadius: BorderRadius.circular(10),
                    child: SizedBox(
                      width: 90.0,
                      height: 90.0,
                      child: InkWell(
                        onTap: () {},
                        child: Container(
                          color: Colors.grey,
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              Icon(Icons.stay_primary_portrait),
                              Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: <Widget>[
                                  Padding(
                                    padding: EdgeInsets.only(left: 0),
                                    child: Text('Lock'),
                                  ),
                                  Padding(
                                    padding: EdgeInsets.only(left: 0),
                                    child: Text('100%'),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                  ),

Raisedbutton上的溢出1.0像素-颤振

2 个答案: