Flutter佈局錦囊---男女性別單選

設計給的效果如下：

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

1. “點擊操作”，感應用戶選擇性別的區域。
2. “選擇性別男”，性別男的選擇區域，點擊會更新圖片和樣式。
3. “選擇性別女”，性別女的選擇區域，點擊會更新圖片和樣式。

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

第1步：繪製組件樹

第2步：實現“點擊操作”

首先爲性別男和性別女的圖文內容搭一個可以點擊的區域，等一下把它們倆放在這個區域裏來，同時定義一個性別選擇的控制器，用來記錄用戶選擇的性別。

import 'package:flutter/material.dart';

/// 自定義的性別選擇組件。
class GenderSelection extends StatefulWidget {
  /// 選擇性別時的回調函數。
  final Function selectCallback;

  GenderSelection({
    this.selectCallback,
  });

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

/// 與自定義的性別選擇組件關聯的狀態子類。
class _GenderSelectionState extends State<GenderSelection> {
  /// 性別選擇的控制器，0表示未選擇，1表示男人，2表示女人。
  int _genderController = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      // 主軸對齊（`mainAxisAlignment`）屬性，如何將子組件放在主軸上。
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        // TODO: 第3步：實現“選擇性別男”
        // TODO: 第4步：實現“選擇性別女”
      ],
    );
  }
}

第3步：實現“選擇性別男”

將性別男的選中、未選中圖片和文本說明，來組合一個選擇性別男的組件，並結合性別選擇的控制器來更新圖片和文本。

        // TODO: 第3步：實現“選擇性別男”
        GestureDetector(
          onTap: (){
            // 選擇男人時返回1並更新組件。
            setState(() {
              _genderController = 1;
              widget.selectCallback(_genderController);
            });
          },
          child: Column(
            children: <Widget>[
              Image.asset(
                _genderController == 1
                ? 'assets/icon_male_selected.png'
                : 'assets/icon_male_normal.png',
                fit: BoxFit.contain,
                height: 90.0,
                width: 90.0,
              ),
              Text(
                '男',
                style: TextStyle(
                  fontSize: 16.0,
                  color: _genderController == 1
                  ? Color(0xFF25C6CA)
                  : Color(0xFF4A4A4A),
                ),
              ),
            ],
          ),
        ),

第4步：實現“選擇性別女”

與上面選擇性別男的組件一樣，不過你要在中間插入一個大小框（SizedBox）組件來分離它們，畢竟距離產生美鴨。

        // TODO: 第4步：實現“選擇性別女”
        SizedBox(width: 36.0),
        GestureDetector(
          onTap: (){
            // 選擇女人時返回2並更新組件。
            setState(() {
              _genderController = 2;
              widget.selectCallback(_genderController);
            });
          },
          child: Column(
            children: <Widget>[
              Image.asset(
                _genderController == 2
                ? 'assets/icon_female_selected.png'
                : 'assets/icon_female_normal.png',
                fit: BoxFit.contain,
                height: 90.0,
                width: 90.0,
              ),
              Text(
                '女',
                style: TextStyle(
                  fontSize: 16.0,
                  color: _genderController == 2
                  ? Color(0xFFFF6B47)
                  : Color(0xFF4A4A4A),
                ),
              ),
            ],
          ),
        ),

第5步：還原效果