1、深入研究flutter元件之（AbsorbPointer）

Swimly發表於2019-09-19
Flutter元件ORB

AbsorbPointer可以想象成web端的遮罩，眾所周知周知，禁止表單的點選時間有disabled，但是這樣一來，如果頁面比較複雜，要控制表單元素是否可點那可成了災難，這時候AbsorbPointer就可以快速解決這個問題。我們可以把它看成是一個透明的穹頂，一旦開啟，從外部是無法到達內部。不過有一點值得注意，如果一個輸入框已經獲取焦點，然後再開啟穹頂，輸入框還是可以輸入的。

屬性

  • absorbing 布林型別，字面意思是吸收，通俗點講這個屬性就是用來控制其child裡面的元件是否可以點選，通常用的最多的也是這個屬性。
  • child Widget型別，可以是任何元件。
  • ignoringSemantics 布林型別，是否忽略語義。經測試沒什麼影響，一般使用比較少。

例項

1、深入研究flutter元件之（AbsorbPointer）

程式碼

import "package:flutter/material.dart";

class AbsorbPointerPage extends StatefulWidget {
  @override
  _AbsorbPointerPageState createState() => _AbsorbPointerPageState();
}

class _AbsorbPointerPageState extends State<AbsorbPointerPage> {
  bool switchValue = false;
  bool radioValue = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Absorbpointer'),
        centerTitle: true,
        elevation: 0,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Row(
            children: <Widget>[
              Text('是否可點選：'),
              Switch(
                value: switchValue,
                onChanged: (bool val) {
                  setState(() {
                    switchValue = val;
                  });
                },
              )
            ],
          ),
          Container(
            child: AbsorbPointer(
              absorbing: switchValue,
              child: Column(
                children: <Widget>[
                  Radio(
                    value: radioValue,
                    onChanged: (bool val) {
                      setState(() {
                        radioValue = val;
                      });
                    },
                  ),
                  MaterialButton(
                    color: Colors.green,
                    child: Text('我是按鈕'),
                    onPressed: () {},
                  ),
                  MaterialButton(
                    color: Colors.green,
                    child: Text('我是按鈕'),
                    onPressed: () {},
                  ),
                  MaterialButton(
                    color: Colors.green,
                    child: Text('我是按鈕'),
                    onPressed: () {},
                  )
                ],
              ),
            ),
          ),
          MaterialButton(
            color: Colors.green,
            child: Text('我是外面的按鈕，不受影響'),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}

複製程式碼

未完待續……！

相關文章