美文网首页Flutter
Flutter | 常用带事件处理的组件详解(主要IconBut

Flutter | 常用带事件处理的组件详解(主要IconBut

作者: 凌川江雪 | 来源:发表于2020-07-07 02:18 被阅读0次

常用带事件处理的组件

  • FloatingActionButton
  • RaisedButton
  • IconButton
  • ToggleButton
    Flutter 1.9 新推出的一个组件;

IconButton 案例

icon:icon组件,可以用原生的封装;
onPressed:匿名函数,实现的点击事件;

代码:

IconButton(
              icon: Icon(Icons.description),
              onPressed: () {
                print('点击了icon  $index');
              },
            )

运行效果:


点击Icon图标:

ToggleButton 案例

代码:

List<bool> indexs = [true,false,false];
---------------------------------------------------------------------
ToggleButtons(
        children: [
          Text('Data1'),
          Text('Data2'),
          Text('Data3'),
        ],
        isSelected: indexs,
        onPressed: (int index){
          int count = 0;

          print('点击了: $index');

          //每次点击 遍历indexs数组,点击的页面设置为true,其他页面设置false
          setState(() {
            for(int buttonIndex =0;buttonIndex < indexs.length;buttonIndex++) {
              if(buttonIndex == index) {
                indexs[buttonIndex] = true;
              }else{
                indexs[buttonIndex] = false;
              }
            }
          });
        },
      )

运行效果:







参考自CSDN的Flutter入门课程

相关文章

网友评论

    本文标题:Flutter | 常用带事件处理的组件详解(主要IconBut

    本文链接:https://www.haomeiwen.com/subject/gznbfktx.html