Question

我是Flutter编程的新手，我想问一下是否可以使图像作为按钮背景抖动？这是我的图片资产：

  final _backgroundButton = new AssetImage("assets/background_button.png");

这是我的按钮：

RaisedButton(
          child: const Text('LANJUTKAN'),
          color: Theme.of(context).accentColor,

          elevation: 0.0,
          splashColor: Colors.blueGrey,
          onPressed: () {
               // Perform some action
          },
),

有人知道怎么做吗？只要将图像设置为背景，我可以将凸起的按钮更改为平面按钮或其他任何设置。谢谢！

Answer 1

“ RaisedButton”是一种材料组件，其形状取决于“材料设计”角色，您可以创建自己的自定义按钮小部件

events: {
   'monthDataUpdated' : function(data){
     this.$nextTick(function () {
       this.parentData = data;
     });
   },
}

Answer 2

就像@pskink提到的那样，将RaisedButton子级从Text更改为Image

RaisedButton(
          child: const AssetImage("assets/background_button.png"),
          color: Theme.of(context).accentColor,

          elevation: 0.0,
          splashColor: Colors.blueGrey,
          onPressed: () {
               // Perform some action
          },
),

但是，如果您同时想要文本和图像，则将Column或Row用作RaisedButton的子项，并将二者都作为子项，

Answer 3

您可以创建自定义窗口小部件

function earlyRelease(e) {
  var doc = SpreadsheetApp.openById("1OF6Y1CTU9dkIgd1P-nw-5f2lqHSS5cGZytndwzJhw-o");
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var numValues = ss.getRange('R19').getValue();
  var studentName = ss.getSheetValues(20, 18, numValues, 1);

  var html = HtmlService.createHtmlOutputFromFile('Page')
      .setTitle('Early Release')
      .setWidth(300);
  SpreadsheetApp.getUi().showSidebar(html);  }

function earlyReleaseList() {
  var doc = SpreadsheetApp.openById("1OF6Y1CTU9dkIgd1P-nw-5f2lqHSS5cGZytndwzJhw-o");
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var numValues = ss.getRange('R19').getValue();
  var studentNames = ss.getSheetValues(20, 18, numValues, 1);
  return studentNames; }

或

在“凸起”按钮中，将Image（）用作子项，而不是Text（）。如果同时需要文本和图像，则仅将Row（）或Column（）小部件用作子项。

如果按钮中仅需要一个图标，请使用IconButton而不是RaisedButton

Answer 4

如果还有其他人来这里寻找，那么MaterialButton可以完美工作。

      MaterialButton(
        padding: EdgeInsets.all(8.0),
        textColor: Colors.white,
        splashColor: Colors.greenAccent,
        elevation: 8.0,
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/button_color.png'),
                fit: BoxFit.cover),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text("SIGN OUT"),
          ),
        ),
        // ),
        onPressed: () {
          print('Tapped');
        },
      ),

具有图像背景颤动的按钮

4 个答案: