Flutter元件描邊,圓角
阿新 • • 發佈:2021-06-06
通常用Container元件的decoration來做
Container( padding: EdgeInsets.symmetric(horizontal: 4.0, vertical: 2.0), decoration: BoxDecoration( border: Border.all(color: Colors.grey, width: 1.0), borderRadius: BorderRadius.circular(3.0)), child: Text(_products[index]['description'])),
padding內邊距屬性,如果不新增描邊會緊貼文字加上邊距之後
EdgeInsets支援多種自定義方法
- EdgeInsets.all() 全方向
- EdgeInsets.only(left,top,right,bottom) 自定義各方向的邊距
- EdgeInsets.symmetric(vertical, horizontal)自定義垂直,水平對稱邊距
- EdgeInsets.fromWindowPadding(ui.WindowPadding padding, double devicePixelRatio) 根據機型螢幕尺寸定義
decoration這裡用到BoxDecoration元件 常用屬性
- color顏色
- border 描邊寬度
- borderRadius 圓角值
- boxShadow 陰影 支援gradient 梯度,混合模式backgroundBlendMode shape自定義形狀 Border BorderRadius同樣支援多種自定方法.
轉載於:https://my.oschina.net/roycehe/blog/2046289