flutter修改 Container 中的 Text 和 Image 的样式

在Flutter中，Container 是一个常用的布局组件，它可以包含子组件（如文本、图片等），并允许你通过设置各种属性来自定义样式。如果你需要修改 Container 中的 Text 和 Image 的样式，可以通过以下方式实现。

1. 基本结构

首先，我们来看一个包含 Text 和 Image 的 Container 示例：

Container(
  width: 200,
  height: 300,
  decoration: BoxDecoration(
    color: Colors.blue, // 背景颜色
    borderRadius: BorderRadius.circular(16), // 圆角
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Image.network(
        'https://example.com/image.jpg', // 图片URL
        width: 100,
        height: 100,
        fit: BoxFit.cover, // 图片裁剪方式
      ),
      SizedBox(height: 10), // 间距
      Text(
        'Hello Flutter',
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: Colors.white, // 文字颜色
        ),
      ),
    ],
  ),
)

2. 修改 Text 样式

要修改 Text 的样式，主要通过 TextStyle 来设置。以下是常见的样式属性：

• fontSize: 设置字体大小。
• fontWeight: 设置字体粗细（如 FontWeight.bold）。
• color: 设置文字颜色。
• fontFamily: 设置字体类型。
• letterSpacing: 设置字符间距。
• decoration: 添加文字装饰（如下划线、删除线等）。

示例：

Text(
  'Hello Flutter',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.w700,
    color: Colors.red,
    fontFamily: 'Roboto',
    letterSpacing: 1.5,
    decoration: TextDecoration.underline,
    decorationColor: Colors.green,
    decorationStyle: TextDecorationStyle.dashed,
  ),
)

3. 修改 Image 样式

对于 Image，你可以通过以下方式调整其样式：

• width 和 height: 设置图片的宽高。
• fit: 控制图片如何适应容器（如 BoxFit.cover、BoxFit.contain 等）。
• color 和 colorBlendMode: 为图片添加颜色叠加效果。
• 圆角处理: 使用 ClipRRect 或 BoxDecoration 实现。

示例：

ClipRRect(
  borderRadius: BorderRadius.circular(10), // 图片圆角
  child: Image.network(
    'https://example.com/image.jpg',
    width: 150,
    height: 150,
    fit: BoxFit.cover, // 图片裁剪方式
    color: Colors.black.withOpacity(0.5), // 颜色叠加
    colorBlendMode: BlendMode.darken, // 混合模式
  ),
)

4. 整体样式调整

如果你想对整个 Container 进行样式调整，可以使用 decoration 属性。例如，设置背景颜色、边框、阴影等。

示例：

Container(
  width: 250,
  height: 350,
  decoration: BoxDecoration(
    color: Colors.teal[100], // 背景颜色
    border: Border.all(
      color: Colors.black, // 边框颜色
      width: 2, // 边框宽度
    ),
    borderRadius: BorderRadius.circular(20), // 圆角
    gradient: LinearGradient(
      colors: [Colors.purple, Colors.blue], // 渐变背景
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: Center(
    child: Text(
      'Styled Container',
      style: TextStyle(
        fontSize: 22,
        color: Colors.white,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

5. 总结

• Text 样式：通过 TextStyle 设置字体大小、颜色、粗细等。
• Image 样式：通过 width、height、fit、colorBlendMode 等属性调整图片显示效果。
• Container 样式：通过 decoration 设置背景颜色、边框、圆角、阴影等。

通过组合这些属性，你可以灵活地自定义 Container 的外观和内容样式。