Flutter 布局控件 基础布局操作

Question

一、文本样式 Text | TextStyle

• TextStyle 是 Text widget 的子元素
• Text widget 中的 textAlign 属性用来控制文本的对齐方向。

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: const Text(
    'Lorem ipsum',
    style: TextStyle(
      fontFamily: 'Georgia',
      fontSize: 24,
      fontWeight: FontWeight.bold,
    ),
    textAlign: TextAlign.center, 
  ),
);

1. 文字间距 letterSpacing | wordSpacing

设置 TextStyle widget 的 letterSpacing 与 wordSpacing 属性为逻辑像素（允许负值）。

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: const Text(
        'Lorem ipsum',
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.w900,
          letterSpacing: 4, 
        ),
      ),
    ),
  ),
);

2. 内联样式更改 TextSpan

一个 Text widget 允许你展示同一类样式的文本。

如果要展现多种样式，使用 RichText widget。它的 text 属性可以设置一个或多个可单独设置样式的 TextSpan 。

<div class="grey-box">
  <div class="red-box">
    Lorem <em>ipsum</em>
  </div>
</div>
<style>
.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
}
.red-box em {
    font: 300 48px Roboto;
    font-style: italic;
}
</style>

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: RichText(
        text: TextSpan(
          style: bold24Roboto,
          children: const <TextSpan>[
            TextSpan(text: 'Lorem '),
            TextSpan(
              text: 'ipsum',
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48,
              ),
            ),
          ],
        ),
      ), 
    ),
  ),
);

3. 文本内容溢出省略 TextOverflow

使用 Text widget 的 maxLines 属性来指定包含在摘要中的行数，以及 overflow 属性来处理溢出文本。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum dolor sit amet, consec etur
  </div>
</div>
<style>
.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      padding: const EdgeInsets.all(16),
      child: Text(
        'Lorem ipsum dolor sit amet, consec etur',
        style: bold24Roboto,
        // 如下
        overflow: TextOverflow.ellipsis,
        maxLines: 1, 
      ),
    ),
  ),
);

二、设置背景颜色 Colors | BoxDecoration

可以通过 Container 的 decoration 或者 color 属性来设置背景颜色。但是，不能同时设置这两个属性，这有可能导致 decoration 覆盖掉 color 。

• 当背景是简单的颜色时，应首选 color 属性.
• 当有使用 渐变 或 图像 等其他情况时，推荐使用 decoration 属性。

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
);

final container = Container(
  // grey box
  width: 320,
  height: 240,
  decoration: BoxDecoration(
    color: Colors.grey[300],
  ),
);

1.背景色线性渐变

要将线性颜色渐变在 widget 的背景上应用，请将它嵌套在一个 Container widget 中。

接着将一个 BoxDecoration 对象传递至 Container 的 decoration ，然后使用 BoxDecoration 的 gradient 属性来变换背景填充内容。

变换「角度」基于 Alignment (x, y) 取值来定：

• 如果开始和结束的 x 值相同，变换将是垂直的 ( 0° | 180° )。
• 如果开始和结束的 y 值相同，变换将是水平的 ( 90° | 270° )。

1. 垂直变换

<div class="box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>
<style>
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}
</style>

同上

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment(0.0, 0.6),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),

      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

2. 水平变换

<div class="box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

<style>
.red-box {
    padding: 16px;
    color: #ffffff;
    background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%);
}
</style>

同上

final container = Container(
  // grey box
  width: 320,
  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment(-1.0, 0.0),
          end: Alignment(0.6, 0.0),
          colors: <Color>[
            Color(0xffef5350),
            Color(0x00ef5350),
          ],
        ),
      ),

      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);

三、设置容器宽度 constraints

要指定一个 Container widget 的宽度，请使用它的 width 属性。

与 CSS 中的 max-width 属性用于指定容器可调整的宽度最大值不同的是，这里指定的是一个固定宽度。要在 Flutter 中模拟该效果，可以使用 Container 的 constraints 属性。新建一个带有 minWidth 和 maxWidth 属性的 BoxConstraints widget。

对嵌套的 Container ，如果其父元素宽度小于子元素宽度，则子元素会调整尺寸以匹配父元素大小。

<div class="grey-box">
  <div class="red-box">
    Lorem ipsum
  </div>
</div>

<style>
.grey-box {
    background-color: #e0e0e0; /* grey 300 */
    width: 320px;
    height: 240px;
    font: 900 24px Roboto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.red-box {
    background-color: #ef5350; /* red 400 */
    padding: 16px;
    color: #ffffff;
    width: 100%;
    max-width: 240px;
}
</style>

final container = Container(
  // grey box
  width: 320,

  height: 240,
  color: Colors.grey[300],
  child: Center(
    child: Container(
      // red box
      width: 240,
      // max-width is 240
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.red[400],
      ),
      child: Text(
        'Lorem ipsum',
        style: bold24Roboto,
      ),
    ),
  ),
);