我最近才开始使用flutter,到目前为止我很喜欢它,但是我在一些UI的修改上遇到了麻烦。任何帮助都是非常感谢的!
我的目标是得到一个圆形按钮,有一个蓝色背景的图标,但然后有一个边界周围的外部是一个深蓝色。有图片附件。
我的方法是:
1.得到一个圆形的蓝色按钮。
1.在按钮上放个图标。
1.添加边框。
我在第三步卡住了,因为我不知道如何添加边框,或者如果它甚至是可能的,因为我的方法来处理这个问题。具体的颜色对我来说并不重要,我会改变主题后。
这是我目前拥有的代码:
var messageBtn = new Row(
children: <Widget>[
new Padding(
padding: const EdgeInsets.all(20.0),
child: new RawMaterialButton(
onPressed: _messages,
child: new Padding(
padding: const EdgeInsets.all(20.0),
child: new Icon(
Icons.message,
size: 30.0,
color: Colors.white,
),
),
shape: new CircleBorder(),
fillColor: Colors.deepPurple,
),
),
new Padding(
padding: const EdgeInsets.all(8.0),
child: new Text(
'Send Messages',
style: new TextStyle(
fontSize: 20.0,
),
)),
],
);
它产生如下结果:
我想要这个:
6条答案
按热度按时间y53ybaqx1#
嗨,凯萨琳,欢迎!
您可以通过更深入地研究组成
MaterialButton
的小部件来实现您想要的结果。首先需要Ink小部件,它使用BoxDecoration提供了更灵活的样式。
Ink
可以包含一个InkWell小部件,它可以识别onTap
并绘制飞溅效果。默认情况下,飞溅会持续到包含框的边缘,但您可以通过为InkWell
指定一个非常大的borderRadius
来使其呈圆形。下面是您要查找的按钮的示例:
结果是这样的:
qybjjes12#
只需将一个
IconButton
封装到一个Container
中,并将其decoration
设置为:xriantvc3#
可以使用带边框的浮动操作按钮:
rn0zuynd4#
在Flutter2中,存在
TextButton
:其中
RedSelectedBorderSide()
为:uqxowvwt5#
对于
TextButton
在
style
内部,将side
与MaterialStateProperty
一起使用,将BorderSide
一起使用。hivapdat6#
我来这里想知道如何添加边框到"库比蒂诺按钮"。我会把我的发现张贴在这里。希望它会帮助别人。
结果:
代码: