5、Flutter Widget(IOS Style) - CupertinoSegmentedControl;

Melrose發表於2019-03-13
FlutteriOS

  iOS風格的分段控制元件。顯示水平列表中子項對映中提供的小元件。 用於在多個互斥選項之間進行選擇。 當選擇分段控制元件中的一個選項時，將不再選擇分段控制元件中的其他選項。

  分段控制元件可以將任何Widget作為其Map of Child中的值之一。 型別T是用於標識每個小部件並確定選擇哪個小部件的鍵的型別。 根據Map類的要求，鍵必須是一致的型別，並且必須具有可比性。 鍵的排序將確定分段控制元件中小部件的順序。

  當分段控制元件的狀態發生更改時，視窗小部件將呼叫onValueChanged回撥。 在onValueChanged回撥中返回與新選擇的視窗小部件關聯的Map的Key。 通常，使用分段控制元件的視窗小部件將偵聽onValueChanged回撥並使用新的groupValue重建分段控制元件以更新當前選擇的選項。

class CupertinoSegmentedControlApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) => CupertinoApp(
    home: _HomePage(),
  );
}

class _HomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) => CupertinoPageScaffold(
      child: Center(child:
      CupertinoSegmentedControl<int>(children: {
        1:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 1"),),
        2:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 2"),),
        3:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 3"),),
        4:Padding(padding: EdgeInsets.all(5.0),child: Text("Child 4"),),
      },
        onValueChanged: (value){
          print("the value changed ! $value");
        },
      ),)
  ) ;
}
複製程式碼

其建構函式如下:

 CupertinoSegmentedControl({
    Key key,
    @required this.children,
    @required this.onValueChanged,
    this.groupValue,
    this.unselectedColor = CupertinoColors.white,
    this.selectedColor = CupertinoColors.activeBlue,
    this.borderColor = CupertinoColors.activeBlue,
    this.pressedColor = const Color(0x33007AFF),
  }) 
複製程式碼

Map<T, Widget> children分段控制元件中的標識鍵和相應的視窗小部件值，其中的T為onValueChanged的回掉的值。

T groupValue當前選定的視窗小部件的識別符號。如果此屬性為null，則最初不會選擇任何視窗小部件。

ValueChanged<T> onValueChanged選中的回掉。

typedef ValueChanged = void Function(T value);

unselectedColor未選中的背景色。selectedColor選中的背景色。borderColor顏色框的顏色。pressedColor按壓時的顏色。

相關文章