【问题标题】:Creating button with custom backgrouind and text创建具有自定义背景和文本的按钮
【发布时间】:2022-01-23 22:02:10
【问题描述】:

我正在尝试创建一个以图像为背景的自定义按钮,但是我遇到了一个问题,并且按钮变小并以图像为中心会产生不良影响。最好的方法是什么?另外最好不要有点击的背景色效果。

         Container(
                                width: double.infinity,
                                height: 40,
                                  alignment: Alignment.center,
                                  decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage('assets/images/btn_bg.jpg')
                                  )
                                ),
                                child: TextButton(
                                  child: Text("test"),
                                  onPressed: () {},
                                )
                              ),

【问题讨论】:

  • 你用图标按钮试过了吗

标签: flutter


【解决方案1】:

[复制] “RaisedButton”是一个材质组件,它的形状取决于“材质设计”角色,您可以创建自己的自定义按钮小部件。 链接:Button with Image Background Flutter

 GestureDetector(
  child: Container(
   width:120,
   height: 40,
   decoration: BoxDecoration(
     color: Colors.black,
     image: DecorationImage(
       image:AssetImage("assets/background_button.png"), 
       fit:BoxFit.cover
     ),
   child: Text("clickMe") // button text
   )
  ),onTap:(){
   print("you clicked me");
  }
)

有关 GestureDetector 的更多信息 链接:https://api.flutter.dev/flutter/widgets/GestureDetector-class.html

【讨论】:

    猜你喜欢
    • 2012-01-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-04-09
    • 2020-09-27
    • 2011-03-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多