フルターセットの丸い角の背景画像とコンテナセットの境界線、丸い角、影

フルターセットの丸い角の背景画像とコンテナセットの境界線、丸い角、影


Flutterで背景画像を実装するにはどうすればよいですか?角が丸い背景画像を作成するにはどうすればよいですか?

フルッターセット丸みを帯びた角の背景画像

コンテナの装飾を使用すると、簡単なコンポーネントの背景画像の角の丸いサイズを簡単に設定できます。

Container(
          decoration: ShapeDecoration(
            image: new DecorationImage(
              //设置背景图片
              image: AssetImage("assets/images/task_icon.jpg"),
              fit: BoxFit.cover,
            ),
            //设置圆角
            shape:RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(20)),
          ),
          //设置边距
          margin: EdgeInsets.only(top: 16, left: 20, right: 20),
          child: new Card(
            color: Colors.transparent,
         ……
)

コンテナを使用して、境界線、丸みを帯びた角、および影を設定します

コンテナコンポーネントの境界線、丸みを帯びた角、影を設定したい場合はどうなりますか?

実装コード:

Container(
          decoration: BoxDecoration(
            //设置边框
            border: new Border.all(color: Color(0xFFFF0000), width: 0.5),
            //背景颜色
            color: Colors.white, 
            //设置圆角
            borderRadius: new BorderRadius.circular((5.0)), 
            //设置阴影
            boxShadow: [BoxShadow(color: Colors.lightGreen, offset: Offset(1.0, 1.0), blurRadius: 1.0, spreadRadius: 1.0), ],
          ),
)

** PS:よりエキサイティングなコンテンツについてはチェックしてください-> 「FlutterDevelopment」
** PS:よりエキサイティングなコンテンツについてはチェックしてください-> 「FlutterDevelopment」
** PS:よりエキサイティングなコンテンツについてはチェックしてください-> 「フラッター開発」

おすすめ

転載: blog.csdn.net/u011578734/article/details/111935344