Flutter 开发代码块

圆角边框

1.基本功能的实现

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue, // 背景颜色
    borderRadius: BorderRadius.circular(16), // 圆角半径
    border: Border.all( // 边框
      color: Colors.red, // 边框颜色
      width: 2, // 边框宽度
    ),
  ),
  child: Center(
    child: Text(
      '圆角边框',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

参数说明

• color: 背景颜色。

• borderRadius: 用于设置圆角的半径，使用 BorderRadius.circular(double radius) 或更灵活的 BorderRadius.only。

• border: 设置边框的样式，包括颜色、宽度等，使用 Border.all() 或其他自定义方法。

2.指定不同角的圆角

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.green,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(20),
      topRight: Radius.circular(10),
      bottomLeft: Radius.circular(30),
      bottomRight: Radius.circular(5),
    ),
    border: Border.all(
      color: Colors.black,
      width: 2,
    ),
  ),
  child: Center(
    child: Text(
      '不同圆角',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

3.只有圆角，没有边框

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(20),
  ),
  child: Center(
    child: Text(
      '只有圆角',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

4.带渐变背景的圆角边框

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.red, Colors.orange],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    borderRadius: BorderRadius.circular(20),
  ),
  child: Center(
    child: Text(
      '渐变背景',
      style: TextStyle(color: Colors.white),
    ),
  ),
);

5.带阴影的圆角边框

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: Colors.blue, width: 2),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5), // 阴影颜色
        spreadRadius: 2, // 阴影扩散范围
        blurRadius: 5, // 阴影模糊范围
        offset: Offset(2, 3), // 阴影偏移量 (x, y)
      ),
    ],
  ),
  child: Center(
    child: Text(
      '带阴影',
      style: TextStyle(color: Colors.black),
    ),
  ),
);

json转模型的时候忽略部分字段

@JsonKey(includeFromJson: false, includeToJson: false)
bool select = false;

API	说明
完全忽略 select	@JsonKey(ignore: true)【废弃】
只影响 toJson() ，但 fromJson() 仍解析 select	@JsonKey(includeFromJson: true, includeToJson: false)
只影响 fromJson() ，但 toJson() 仍包含 select	@JsonKey(includeFromJson: false, includeToJson: true)

通过 @JsonKey(ignore: true)，你可以精确控制 json_serializable 的 JSON 生成逻辑！

关于富文本

1. 基础富文本

RichText(
  text: TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: 'Flutter',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
      ),
      TextSpan(
        text: ' 开发者！',
        style: TextStyle(fontStyle: FontStyle.italic, color: Colors.green),
      ),
    ],
  ),
)

2. 富文本 + 点击事件

RichText(
  text: TextSpan(
    text: '点击 ',
    style: TextStyle(fontSize: 18, color: Colors.black),
    children: [
      TextSpan(
        text: '这里',
        style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        recognizer: TapGestureRecognizer()..onTap = () {
          print("用户点击了这里！");
        },
      ),
      TextSpan(text: ' 进行操作。'),
    ],
  ),
)

3. 富文本 + 不同字体

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 20),
    children: [
      TextSpan(text: '默认字体, '),
      TextSpan(
        text: '自定义字体',
        style: TextStyle(fontFamily: 'CustomFont', color: Colors.red),
      ),
    ],
  ),
)

4. 富文本 + 图标

RichText(
  text: TextSpan(
    style: TextStyle(fontSize: 20, color: Colors.black),
    children: [
      TextSpan(text: '欢迎使用 '),
      WidgetSpan(
        child: Icon(Icons.star, color: Colors.orange, size: 24),
      ),
      TextSpan(text: ' Flutter！'),
    ],
  ),
)