Flutter佈局錦囊---圓框的表單字段

設計給的效果如下：

拿到設計後，先把整體拆分成幾個部分：

1. “黑色圓角邊框”，因爲文本字段（TextField）組件的沒有符合需求的樣式，所以要自己做一個邊框。
2. “文本輸入框”，去掉文本字段（TextField）組件默認樣式的文本輸入框。

然後就可以開始進行編碼了。

第1步：繪製組件樹

第2步：實現“黑色圓角邊框”

通過容器（Container）組件的邊界（border）屬性做出一個矩形的邊框，再通過邊界半徑（borderRadius）屬性做出圓角效果，然後，一個圓角邊框就出來了。

import 'package:flutter/material.dart';

/// 自定義的圓框表單字段組件。
class RoundFormField extends StatefulWidget {
  /// 字段內的提示文字。
  final String hintText;
  /// 文本字段的控制器。
  final TextEditingController textEditingController;
  /// 文本字段修改時的回調函數。
  final Function checkCallback;

  RoundFormField({
    this.hintText,
    this.textEditingController,
    this.checkCallback,
  });

  @override
  _RoundFormFieldState createState() => _RoundFormFieldState();
}

/// 與自定義的圓框表單字段組件關聯的狀態子類。
class _RoundFormFieldState extends State<RoundFormField> {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        // 邊界（`border`）屬性，要在背景顏色、漸變或圖像上方繪製的邊框。
        border: Border.all(
          width: 3.0,
          color: Color(0xFF4A4A4A),
        ),
        // 邊界半徑（`borderRadius`）屬性，對此容器框的角進行舍入。
        borderRadius: const BorderRadius.all(
          // 半徑（`Radius`）類，圓形或橢圓形的半徑。
          // 邊界半徑.圓（`Radius.circular`）構造函數，構造一個圓形半徑。
          const Radius.circular(2.0)
        ),
      ),
      // TODO: 第3步：實現“文本輸入框”
    );
  }
}

第3步：實現“文本輸入框”

在Flutter中，輸入文本只能用文本字段（TextField）組件，但是你需要把它的默認裝飾和邊框都去掉，再設置一下下字體大小、顏色就好了。

      // TODO: 第3步：實現“文本輸入框”
      child: TextField(
        // 控制器屬性，控制正在編輯的文本。
        controller: widget.textEditingController,
        // 光標顏色屬性，繪製光標時使用的顏色。
        cursorColor: const Color(0xFFFF6B47),
        // 光標寬度屬性，光標的厚度，默認是2.0。
        cursorWidth: 1.0,
        // 樣式屬性，用於正在編輯的文本的樣式。
        style: TextStyle(
          color: Color(0xFF4A4A4A),
          fontSize: 16.0,
        ),
        // 裝飾（`decoration`）屬性，在文本字段周圍顯示的裝飾。
        decoration: InputDecoration(
          // 邊框屬性，裝飾的容器周圍繪製的形狀。
          border: InputBorder.none,
          // 填充顏色屬性，填充裝飾容器的顏色。
          fillColor: const Color(0xFFF5F5F5),
          // 是密集屬性，輸入子項是否是密集形式的一部分（即使用較少的垂直空間）。
          isDense: true,
          // 填充屬性，如果爲`true`，則裝飾的容器將填充fillColor顏色。
          filled: true,
          // 提示樣式屬性，用於提示文本（`hintText`）的樣式。
          hintStyle: TextStyle(
            color: Color(0xFF9B9B9B),
            fontSize: 16.0,
          ),
          // 提示文本屬性，提示字段接受哪種輸入的文本。
          hintText: widget.hintText,
        ),
        // 在改變屬性，當正在編輯的文本發生更改時調用。
        onChanged: (value) {
          // 每次修改字段文本時都會調用一次。
          widget.checkCallback(value);
        },
      ),

第4步：還原效果