Flutter UI-装飾、形状

フラッターの装飾はアンドロイドの形です。次の背景色 背景图 边框 圆角 阴影 渐变色ような属性を設定できます：装飾。装飾は基本クラスです。通常、装飾のサブクラスを使用します。BoxDecoration

BoxDecoration属性

Flutterで、Weightのプロパティを確認する場合は、コンストラクターを確認するだけです。BoxDecorationでサポートされているプロパティは次のとおりです。

const BoxDecoration({
this.color,//背景色
this.image,//图片
this.border,//描边
this.borderRadius,//圆角大小
this.boxShadow,//阴影
this.gradient,//渐变色
this.backgroundBlendMode,//图像混合模式，具体去百度
this.shape = BoxShape.rectangle,//形状,BoxShape.circle和borderRadius不能同时使用
})
复制代码

デコレーションの一般的な属性は次のとおりです。一目でわかるので、詳しくは説明しません。以下では、珍しくて忘れやすいものをいくつか紹介します。

      decoration: BoxDecoration(
        // 背景色
        color: Colors.lightBlueAccent,
        // 边框，
        border: Border.all(color: Colors.yellowAccent, style: BorderStyle.solid, width: 5),
        // 背景图
        image: new DecorationImage(
            image: new NetworkImage(
                'XXXUrl'
                fit: BoxFit.cover),
        ),
        // 边框圆角
        borderRadius: BorderRadius.all(Radius.circular(30)),
        // 子 weight
        child: Text("AAAAAA"),
    );
复制代码

boxShadowシャドウ

this.boxShadowプロパティは複数のパラメータを受け入れるため、装飾によって複数のシャドウを追加できます。どうなるのでしょうか...わかりません。

BoxShadowには4つのパラメーターがあります。

色-影の色
オフセット-シャドウ位相オフセット
blurRadius-ガウスブラー値
SpreadRadius-影の拡大量。この値が何であるかは本当にわかりません。シーンはありません。通常、この値を書き込むことはありません。

boxShadow: [
          BoxShadow(
            color: Colors.redAccent,
            offset: Offset(20, 20),
            blurRadius: 10,
          ),
        ]
复制代码

上記の例は、実際の影の大きさがわからないため、見苦しいです。これについては、公式ドキュメントの例を参照してください。

 DecoratedBox(
    decoration: BoxDecoration(
      gradient: LinearGradient(colors:[Colors.red,Colors.orange[700]]), //背景渐变
      borderRadius: BorderRadius.circular(3.0), //3像素圆角
      boxShadow: [ //阴影
        BoxShadow(
            color:Colors.black54,
            offset: Offset(2.0,2.0),
            blurRadius: 4.0
        )
      ]
    ),
  child: Padding(padding: EdgeInsets.symmetric(horizontal: 80.0, vertical: 18.0),
    child: Text("Login", style: TextStyle(color: Colors.white),),
  )
)
复制代码

勾配

この部分は、アンドロイドシェイプのグラデーションに似ています。違いは、設定が異なることです。アンドロイドシェイプについては、xml_drawing：shapeを参照してください。

装飾は2つの勾配をサポートします：LinearGradient線形勾配とRadialGradient走査勾配

LinearGradient：

begin-グラデーションが始まる位置
end-勾配が終了する位置
色-グラデーションの色、配列
停止-0.0から1.0までの値を持つ値のリスト
tileMode-タイルモード

基本設定：

gradient: LinearGradient(colors: [
    Colors.red,
    Colors.white,
    Colors.blue,
]),
复制代码

勾配方向を制御する

beginとendの3つのパラメーターは、勾配の方向を制御できます左 -> 右。これらはすべてデフォルトです。ここに1つあります。右 -> 左

gradient: LinearGradient(colors: [
    Colors.red,
    Colors.white,
    Colors.blue,
  ],
  begin: Alignment.centerRight,
  end: Alignment.centerLeft,
),
复制代码

次のような数値を書き込むこともできます。

end: Alignment(0.6,0.0)
复制代码

0.6はパーセンテージを意味し、1が最大です

TileModeタイル

TileModeは、グラデーションカラーを繰り返す方法です。

TileMode.clamp -default、効果なし
TileMode.mirror-ミラーリフレクション
TileMode.repeated -repeat

特定の効果については、図を参照してください。

勾配分割を停止します

ストップこのグラデーションセグメンテーションは、グラデーションの各セグメントのパーセンテージとして理解できます。ストップも配列であり、数は色の色の値の数と一致する必要があります。一致しない場合、表示できません。次に、ストップの値を統合する必要があります= 1、そうでない場合は表示されます偏差があり、最後のストップの値は昇順である必要があります...そうでない場合は表示されません

gradient: LinearGradient(
    colors: [
      Colors.red,
      Colors.white,
      Colors.blue,
    ],
    begin: Alignment.centerRight,
    end: Alignment.centerLeft,
    stops: [0.1,0.3,0.7],
),
复制代码

RadialGradient：

center-勾配半径の中心-勾配の半径、浮動小数点の色-勾配の色は配列停止です-勾配分割tileMode-タイルモード

上記の線形勾配を見ると、これらのプロパティについて誰もが明確になっているはずです。RadialGradientはデフォルトで中心点であるため、centerの値は中心点からのオフセットです。中心点から開始する場合は、Alignment（0.0、 0.0）。radius半径は10進数で0-1で、パーセンテージを意味します

gradient: RadialGradient(
    colors: [
      Colors.red,
      Colors.blue,
    ],
    center: Alignment(0.0,0.0),
    radius: 0.5,
),
复制代码

RadialGradientの非常に意味のある例

Container(
  margin: EdgeInsets.only(top: 50.0, left: 120.0), //容器外补白
  constraints: BoxConstraints.tightFor(width: 200.0, height: 150.0), //卡片大小
  decoration: BoxDecoration(//背景装饰
      gradient: RadialGradient( //背景径向渐变
          colors: [Colors.red, Colors.orange],
          center: Alignment.topLeft,
          radius: .98
      ),
      boxShadow: [ //卡片阴影
        BoxShadow(
            color: Colors.black54,
            offset: Offset(2.0, 2.0),
            blurRadius: 4.0
        )
      ]
  ),
  transform: Matrix4.rotationZ(.2), //卡片倾斜变换
  alignment: Alignment.center, //卡片内文字居中
  child: Text( //卡片文字
    "5.20", style: TextStyle(color: Colors.white, fontSize: 40.0),
  ),
);
复制代码

形状

アンドロイドのように、形はすべて北京の形です。フラッターにはリングがありません。それはrectangle長方形またはcircle円のみです。BoxShape.circleはborderRadiusと競合します。使用できるのは1つだけです。

      decoration: BoxDecoration(
          border: Border.all(
              color: Colors.yellowAccent, style: BorderStyle.solid, width: 5),
          image: new DecorationImage(
              image: new NetworkImage('xxx'),
              fit: BoxFit.cover),
          shape: BoxShape.circle
          child: Text("AAAAAA"),
    );
复制代码

BoxDecoration属性

boxShadowシャドウ

勾配

形状

おすすめ