Flutter 样式常用属性

(1)Flutter 模块样式

decoration: BoxDecoration(样式属性)

颜色】 color

 color: const Color(0xFF0099ff), //颜色

插入间隔】SizedBox()

const SizedBox(height: 5), //插入间隔

内外边距】padding

padding: const EdgeInsets.only(top: 10, left: 10), //内边距

margin: const EdgeInsets.all(20), //外边距

圆角边框】 borderRadius

 borderRadius: BorderRadius.circular(20), //圆角边框大小

边框设计】border

// 边框设计

border: Border.all(

    color: const Color.fromARGB(255, 209, 38, 55), //颜色

    width: 3, //边框大小

),

边框阴影】boxShadow

// 边框阴影

boxShadow: const [

    BoxShadow(

          color: Color.fromARGB(255, 217, 255, 0), //颜色

          blurRadius: 10, //阴影宽度

    )

],

背景渐变】gradient

//背景线性渐变 LinearGradient //径向渐变 RadialGradient

gradient: const LinearGradient(

    colors: [

      Color.fromARGB(255, 255, 77, 0), //颜色

      Color.fromARGB(255, 30, 26, 143), //颜色

   ],

),

上下居中】alignment

 alignment: const Alignment(0, 0), //上下居中】 上下值

  mainAxisAlignment: MainAxisAlignment.center, //居中

水平/垂直 间距】spacing

 spacing: 10, //水平间距

runSpacing: 15, //垂直间距

位移】alignment

alignment: Alignment(1.2, -1), //位移

alignment: Alignment.topLeft, //居左

外边距】margin

margin: const EdgeInsets.fromLTRB(0, 10, 0, 20), //外边距】 四边值      

内边距】padding

padding: const EdgeInsets.fromLTRB(0, 10, 0, 10), //内边距】 四边值

旋转/位移/倾斜】transform

transform: Matrix4.translationValues(1, 2, 3), //位移】 左上右

transform: Matrix4.rotationY(1), //旋转】 X向上 Y向后 Z向左

transform: Matrix4.skew(0, 1), //倾斜】 X向右 Y向下

背景图片】image

/*设计背景图片 */

image: const DecorationImage(

  image: NetworkImage("https"),

  fit: BoxFit.cover, //图片显示模式 铺满显示

),

置顶导航定位】Positioned

/* 置顶定位 */

Positioned(

  left: 0, //定位坐标

  top: 0, //定位坐标

  // 标签

  child: Container(Ï

    child: const Text("二级导航标题"),

  ),

)

(2)Flutter 标签样式

文本】Text

child: const Text(

        "你好", //内容

        textAlign: TextAlign.right, //右居中

        maxLines: 1, //显示行数

        overflow: TextOverflow.ellipsis, //益出显示省略号

        style: TextStyle(

          color: Color(0xffffffff), //颜色

          fontSize: 20, //字体大小

          textAlign: TextAlign.right, //右居中

          fontWeight: FontWeight.bold, //字体变粗

          fontStyle: FontStyle.italic, //字体倾斜

          backgroundColor: Color.fromARGB(255, 203, 43, 43), //背景颜色

          letterSpacing: 2, //字体间距

          /* 字体底部横行 */

          decoration: TextDecoration.underline, //字体底部横行

          decorationColor: Color.fromARGB(255, 231, 239, 6), //字体底部横行颜色

     ),

),

图片 】Image

/* 图片标签 */

  child: Image.network(

    "img",

    scale: 2, //图片缩放

    alignment: Alignment.center, //居中显示

    width: double.infinity,

    fit: BoxFit.contain, //图片显示模式

    repeat: ImageRepeat.repeat, //图片平铺

),

 本地图片】Image.asset()

 //加载本地图片

    return Container(

      width: 120,

      height: 120,

      //在 项目根目录下 pubspec.yaml 文件 flutter: => assets: 中配置本地图片

      child: Image.asset(

        "images/flutter-logo.png", //本地图片地址

        fit: BoxFit.cover, //图片显示模式

      ),

 );

列表】ListTile

/* 列表 */

ListTile(

  // 左侧

 leading: Icon(

    Icons.home,

    color: Color(0xFf8977ff),

  ),

  title: const Text("列表标题"),

  subtitle: const Text("内容内容内容"),

  //右侧

  trailing: Image.network(

      "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1aCc4z.img"),

),

const Divider(), //列表下横线

按钮】ElevatedButton

//普通按钮

        ElevatedButton(

          //按钮样式

          style: ButtonStyle(

            backgroundColor: MaterialStateProperty.all(Colors.red), //背景颜色

            foregroundColor: MaterialStateProperty.all(Colors.amber), //字体颜色

          ),

          onPressed: () {}, //按下触发的事件

          child: const Text("凸起按钮"), //按钮名称

        ),

//圆角按钮

        ElevatedButton.icon(

          // 样式设计

          style: ButtonStyle(

            // 形状设计

            shape: MaterialStateProperty.all(

              // 圆形/边框设计

              RoundedRectangleBorder(

                borderRadius: BorderRadius.circular(20), //圆角

              ),

            ),

          ),

          onPressed: () {}, //触发事件

          icon: const Icon(Icons.send),

          label: const Text("发送3"),

        ),

//圆按钮

        Container(

          height: 60,

          width: 60,

          child: ElevatedButton(

            // 样式设计

            style: ButtonStyle(

              // 形状设计

              shape: MaterialStateProperty.all(

                // 圆框设计

                const CircleBorder(

                  //边框

                  side: BorderSide(

                    color: Color(0xffffffff),

                  ),

                ),

              ),

            ),

            onPressed: () {

              print("ABCE");

            }, //触发事件

            child: const Text("圆按钮"),

          ),

        ),

      ],

(3)Flutter 类型模块

圆形模块】return ClipOval()

//设计圆形图片

return ClipOval(

      child: Image.network(

        "jpg",

        width: 200,

        height: 200,

        fit: BoxFit.cover,

      ),

    );

居中模块】return Center()

//Center使模块居中

return Center(

  child: Container(

    width: 200, //宽度

    height: 200, //高度

  ),

);

滚动长列表】return ListView()

 //ListView 长滚动列表

    return ListView(

      children: [

        /* 列表 */

        ListTile(

          // 左侧

         leading: Icon(

            Icons.home,

            color: Color(0xFf8977ff),

          ),

          title: const Text("列表标题"),

          subtitle: const Text("内容内容内容"),

          //右侧

          trailing: Image.network(

              "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1aCc4z.img"),

        ),

        const Divider(), //列表下横线

      ],

    );

模块】 Container

//模块

Container(

  alignment: Alignment.center, //模块居中

  //模块样式

  decoration: const BoxDecoration(

    color: Color(0xfff234ff),

    //设置四周圆角

      borderRadius: BorderRadius.only(

        topLeft: Radius.circular(30),

        topRight: Radius.circular(30),

      ),

  ),

   clipBehavior: Clip.hardEdge, //超出部分,可裁剪

  //标签

  child: Column(

    children: [

      Image.asset("./images/flutter-logo.png"),//本地图片Ï

      const SizedBox(height: 5), //插入间隔

      const Text("带样式", style: TextStyle(fontSize: 20)),//文本标签Ï

    ],

  ),

),

卡片模式】Card()

//卡片模式

        Card(

          //Card的阴影效果

          shape: RoundedRectangleBorder(

            borderRadius: BorderRadius.circular(10), //圆形

          ),

          elevation: 10, //阴影深度

          margin: const EdgeInsets.all(10), //外边距

          child: Column(

            children: const [

              ListTile(

                title: Text("zzz"),

                subtitle: Text("12345678765"),

              ),

              Divider(), //下横行

              ListTile(

                title: Text("zzz"),

                subtitle: Text("12345678765"),

              )

            ],

          ),

        ),

(4)Flutter 内置API

取屏幕参数】MediaQuery

final size = MediaQuery.of(context).size; //获取屏幕 (使用方式 size.xxx)

随机生成key

key = UniqueKey();//随机生成key ,

  key2 = ObjectKey( Box(Color:Colors.amber));//

  key3 = ValueKey(“1”);

删除数组

Arrlist.removeAt(index);//删除列表数组

加载状态

child: CircularProgressIndicator(),//加载状态

Json转对象

objxxx.fromJson(jsonDecode(jsonxxx));

332 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注