使用ShapeDecoration可以做出各种形状 斜切角: BeveledRectangleBorder 圆角: RoundedRectangleBorder 超椭圆: SuperellipseShape 体育场: StadiumBorder 圆形: CircleBorder //斜切角形状示例 Container( width: 120, height: 120, decoration: ShapeDecoration( shape: BeveledRectangleBorder( borderRadius: BorderRadius.circu...
Flutter入门一 1.Container 1. Container设置圆角 Container(width:widget.width,height:widget.height,decoration:BoxDecoration(color:widget.backgroundColor,border:Border.all(color:widget.borderColor ?? widget.backgroundColor,width:widget.borderWidth,),borderRadius:BorderRadius.all(Radius.circular(4.0))),child...
padding: const EdgeInsets.all(20.0), // Container 的样式 decoration: BoxDecoration( borderRadius: BorderRadius.circular(20.0), color: Colors.red,// shape: BoxShape.circle, // 该属性不可同 borderRadius 一起使用 backgroundBlendMode: BlendMode.colorDodge, // 背景图片和颜色混合模式 image: Decorati...
圆形按钮 Container(height:80,child:ElevatedButton(style:ButtonStyle(backgroundColor:MaterialStateProperty.all(Colors.blue),foregroundColor:MaterialStateProperty.all(Colors.white),elevation:MaterialStateProperty.all(20),shape:MaterialStateProperty.all(CircleBorder(side:BorderSide(color:Colors.white)),)),onPre...
因为Container的shape是继承自 BoxBorder的,而Material的shape是继承自ShapeBorder, 虽然BoxBorder也是继承ShapeBorder的 具体先看下图片吧,清晰明了: decoration.png 5.1shape外观样式,BoxShape.circle圆形图案,BoxShape.rectangle方形图案; 5.2borderRadius边框半径,有以下几种写法: ...
Container( child: Text('老孟,一个有态度的程序员'), padding: EdgeInsets.symmetric(horizontal: 10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), border: Border.all( color: Colors.blue, width: 2, ), ), ) 效果如下: ...
shape: BeveledRectangleBorder( side: BorderSide(width:1, color: Colors.red), borderRadius: BorderRadius.circular(100)), child: Text('老孟'), onPressed: () {}, ) 同理,如果半径设置为0,就是矩形。 RaisedButton( shape: BeveledRectangleBorder( ...
ContinuousRectangleBorder 连续的圆角矩形,直线和圆角平滑连续的过渡,和RoundedRectangleBorder相比,圆角效果会小一些。 RaisedButton( shape: ContinuousRectangleBorder( side: BorderSide(color: Colors.red), borderRadius: BorderRadius.circular(20)), child: Text('老孟'), ...
borderRadius: BorderRadius.circular(20), child: Container( height:150, width:150, child: Image.asset('images/1.png', fit: BoxFit.cover, ), ), ) 效果如图: ClipOval ClipOval裁剪为椭圆形,椭圆形的大小为正切父组件,因此如果父组件为正方形,切出来是圆形,用法如下: ...
Container 组件 : 容器组件 ; 继承 StatelessWidget , 可以通过约束其 this.child 子节点 , 设置该子节点的 this.alignment 居中方式 , this.padding 边距 , Color color 颜色值 等参数 ; 详细的设置可以参考 Container 源码中的构造函数中的参数 , 阅读每个参数的文档注释 , 以了解每个参数的作用 ; ...