Flutter_学习记录_基本组件的使用记录_2

1. PopupMenuButton的使用

代码案例：

import 'package:flutter/material.dart';

// ----PopupMemuButtonDemo的案例----
class PopupMemuButtonDemo extends StatefulWidget {
  const PopupMemuButtonDemo({super.key});

  @override
  State<PopupMemuButtonDemo> createState() => _PopupMemuButtonDemoState();
}

class _PopupMemuButtonDemoState extends State<PopupMemuButtonDemo> {
  String _currentMenuItem = "Home";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PopupMemuButtonDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_currentMenuItem),
                PopupMenuButton(
                  onSelected: (value) {
                    print(value);
                    setState(() {
                      _currentMenuItem = value;
                    });
                  },
                  itemBuilder: (BuildContext context) => [
                    PopupMenuItem(value: "Home", child: Text("Home")),
                    PopupMenuItem(value: "Discover", child: Text("Discover") ),
                    PopupMenuItem(value: "My", child: Text("My"))
                  ],
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果图如下:

2. Checkbox 和 CheckboxListTile 的使用

代码案例：

import 'package:flutter/material.dart';

class CheckBoxDemo extends StatefulWidget {
  const CheckBoxDemo({super.key});

  @override
  State<CheckBoxDemo> createState() => _CheckBoxDemoState();
}

class _CheckBoxDemoState extends State<CheckBoxDemo> {

  bool _checkboxItemA = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBoxDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CheckboxListTile(
              value: _checkboxItemA, 
              onChanged: (value){
                setState(() {
                  if (value != null) {
                    _checkboxItemA = value;
                  }
                });
              },
              title: Text("Checkbox Item A"),
              subtitle: Text("Description"),
              secondary: Icon(Icons.bookmark),
              selected: _checkboxItemA,
              activeColor: Colors.green,
            ),

            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Checkbox(
                  value: _checkboxItemA, 
                  onChanged: (value) {
                    setState(() {
                      if (value != null) {
                        _checkboxItemA = value;
                      }
                    });
                  },
                  activeColor: Colors.green,
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果图如下:

3. Radio 和 RadioListTile的使用

代码案例如下：

import 'package:flutter/material.dart';

class RadioDemo extends StatefulWidget {
  const RadioDemo({super.key});

  @override
  State<RadioDemo> createState() => _RadioDemoState();
}

class _RadioDemoState extends State<RadioDemo> {
  int _radioGroupA = 0;

  void _handleRadioValueChanged (int? value) {
    setState(() {
      if (value != null) {
        _radioGroupA = value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RadioDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("男"),
                Radio(
                  value: 0, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                ),
                SizedBox(width: 32.0),
                Text("女"),
                Radio(
                  value: 1, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                ),
              ],
            ),
            SizedBox(height: 32.0),
            RadioListTile(
                  value: 0, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                  title: Text("Option A"),
                  subtitle: Text("Description"),
                  secondary: Icon(Icons.filter_1_outlined),
                  selected: _radioGroupA == 0,
                ),
                RadioListTile(
                  value: 1, 
                  groupValue: _radioGroupA, 
                  onChanged: _handleRadioValueChanged,
                  activeColor: Colors.green,
                  title: Text("Option B"),
                  subtitle: Text("Description"),
                  secondary: Icon(Icons.filter_2_outlined),
                  selected: _radioGroupA == 1,
                ),
          ],
        ),
      ),
    );
  }
}

效果图如下：

4. Switch 和 SwitchListTile 的案例

import 'package:flutter/material.dart';

class Switchdemo extends StatefulWidget {
  const Switchdemo({super.key});

  @override
  State<Switchdemo> createState() => _SwitchdemoState();
}

class _SwitchdemoState extends State<Switchdemo> {
  bool _switchItemA = false;

  void _handleSwitchValueChanged(bool? value) {
    setState(() {
      if (value != null) {
        _switchItemA = value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SwitchDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(_switchItemA ? "已打开" : "未打开", style: TextStyle(fontSize: 24.0)),
                Switch(
                  value: _switchItemA, 
                  onChanged: _handleSwitchValueChanged,
                  activeColor: Colors.lightGreen,
                )
              ],
            ),

            SwitchListTile(
              value: _switchItemA, 
              onChanged: _handleSwitchValueChanged,
              title: Text("Switch Item A"),
              subtitle: Text("Description"),
              secondary: Icon(_switchItemA ? Icons.visibility : Icons.visibility_off),
              selected: _switchItemA,
            )
          ],
        ),
      ),
    );
  }
}

效果图如下：

5. Slider 的使用

代码案例：

import 'package:flutter/material.dart';

class SliderDemo extends StatefulWidget {
  const SliderDemo({super.key});

  @override
  State<SliderDemo> createState() => _SliderDemoState();
}

class _SliderDemoState extends State<SliderDemo> {
  double _sliderItemA = 0.0;

  void _handleSliderValueChanged(double? value) {
    setState(() {
      if (value != null) {
        _sliderItemA = value;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SliderDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Slider(
              value: _sliderItemA, 
              onChanged: _handleSliderValueChanged,
              activeColor: Colors.green,
              inactiveColor: Colors.grey[100],
              min: 0.0, // 设置最小值
              max: 10.0, // 设置最大值
              divisions: 10, // 分割为几份
              label: "${_sliderItemA.toInt()}", // 标签
            ),
            SizedBox(height: 18.0),
            Text("SliderValue: $_sliderItemA")
          ],
        ),
      ),
    );
  }
}

效果图：

6. 时间选择器的简单使用

代码案例：

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class DatetimeDemo extends StatefulWidget {
  const DatetimeDemo({super.key});

  @override
  State<DatetimeDemo> createState() => _DatetimeDemoState();
}

class _DatetimeDemoState extends State<DatetimeDemo> {

  DateTime selectedDate = DateTime.now();

  TimeOfDay selectedTime = TimeOfDay(hour: 9, minute: 30);

  Future<void> _selectedDate() async {
    final DateTime? date = await showDatePicker(
      context: context, 
      initialDate: selectedDate,
      firstDate: DateTime(1900), 
      lastDate: DateTime(2100),
    );

    if (date != null) {
      setState(() {
        selectedDate = date;
      });
    }
  }

  Future<void> _selectedTime() async {
    final TimeOfDay? time = await showTimePicker(
      context: context, 
      initialTime: selectedTime
    );

    if (time != null) {
      selectedTime = time;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("DateTimeDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InkWell(
              onTap: _selectedDate,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(DateFormat.yMMMd().format(selectedDate), style: TextStyle(fontSize: 18.0)),
                  Icon(Icons.arrow_drop_down),
                ],
              ),
            ),
            SizedBox(height: 18.0),
            InkWell(
              onTap: _selectedTime,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(selectedTime.format(context), style: TextStyle(fontSize: 18.0)),
                  Icon(Icons.arrow_drop_down),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

效果图：

7. SimpleDialog 的使用

代码案例：

import 'package:flutter/material.dart';

class SimpledialogDemo extends StatefulWidget {
  const SimpledialogDemo({super.key});

  @override
  State<SimpledialogDemo> createState() => _SimpledialogDemoState();
}

class _SimpledialogDemoState extends State<SimpledialogDemo> {

  String _choiceString = "Nothing";

  void _openSimpleDialog()  {
    showDialog(
      context: context, 
      builder: (BuildContext context) {
        return SimpleDialog(
          title: Text("SimpleDialog"),
          clipBehavior: Clip.none,
          children: [
            SimpleDialogOption(
              onPressed: (){
                setState(() {
                  _choiceString = "A";
                });
                Navigator.pop(context);
              },
              child: Text("Option A"),
            ),
            SimpleDialogOption(
              onPressed: (){
                setState(() {
                  _choiceString = "B";
                });
                Navigator.pop(context);
              },
              child: Text("Option B"),
            ),
            SimpleDialogOption(
              onPressed: (){
                setState(() {
                  _choiceString = "C";
                });
                Navigator.pop(context);
              },
              child: Text("Option C"),
            ),
          ],
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SimpleDialogDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Your option is : $_choiceString")
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _openSimpleDialog,
        child: Icon(Icons.format_list_numbered)
      ),
    );
  }
}

效果图如下：

8. AlertDialog 的使用

代码案例：

import 'package:flutter/material.dart';

class AlertdialogDemo extends StatefulWidget {
  const AlertdialogDemo({super.key});

  @override
  State<AlertdialogDemo> createState() => _AlertdialogDemoState();
}

class _AlertdialogDemoState extends State<AlertdialogDemo> {

  String _alertDialogChoice = "Nothing";

  void _openAlertDialog() {
    showDialog(
      context: context, 
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("AlertDialog"),
          content: Text("Are you sure about this?"),
          actions: [
            TextButton(
              onPressed: (){
                setState(() {
                  _alertDialogChoice = "cancel";
                });
                Navigator.pop(context);
              }, 
              child: Text("cancel")
            ),
            TextButton(
              onPressed: (){
                setState(() {
                  _alertDialogChoice = "ok";
                });
                Navigator.pop(context);
              }, 
              child: Text("ok")
            ),
          ],
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SimpleDialogDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Your choice is: $_alertDialogChoice"),
            SizedBox(height: 16.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                OutlinedButton(
                  onPressed: _openAlertDialog, 
                  child: Text("Open Alert Dialog")
                )
              ],
            )
          ],
        ),
      )
    );
  }
}

效果如下：

9.showModalBottomSheet 和 showBottomSheet的使用

注意：showBottomSheet 这个需要用到GlobalKey<ScaffoldState>(), 并且这个需要在Scaffold 中的key关联上，不然获取不到对应的状态，就显示不出来。

import 'package:flutter/material.dart';

class BottomsheetDemo extends StatefulWidget {
  const BottomsheetDemo({super.key});

  @override
  State<BottomsheetDemo> createState() => _BottomsheetDemoState();
}

class _BottomsheetDemoState extends State<BottomsheetDemo> {

  String _choiceString = "Nothing";

  // 需要在Scaffold 中的关联 key
  final _bottomSheetScaffoldKey = GlobalKey<ScaffoldState>();

  void _openModelBottomSheet() {
    showModalBottomSheet(context: context, builder: (BuildContext context){
      return Container(
        height: 200.0,
        child: Column(
          children: [
            ListTile(title: Text("Option A"), onTap: () {
              setState(() {
                _choiceString = "A";
              });
              Navigator.pop(context);
            }),
            ListTile(title: Text("Option B"), onTap: () {
              setState(() {
                _choiceString = "B";
              });
              Navigator.pop(context);
            }),
            ListTile(title: Text("Option C"), onTap: () {
              setState(() {
                _choiceString = "C";
              });
              Navigator.pop(context);
            })
          ],
        ),
      );
    });
  }

  void _openBottomSheet() {
    _bottomSheetScaffoldKey.currentState?.showBottomSheet(
      (BuildContext context){
        return BottomAppBar(
          child: Container(
            height: 90.0,
            width: double.infinity,
            padding: EdgeInsets.all(16.0),
            child: Row(
              children: [
                Icon(Icons.pause_circle_outline),
                SizedBox(width: 16.0),
                Text("Bottom sheet"),
                Expanded(child: Text("Fix you - Coldplay", textAlign: TextAlign.right))
              ],
            ),
          ),
        );
      }
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _bottomSheetScaffoldKey,
      appBar: AppBar(
        title: Text("BottoomSheetDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: _openBottomSheet, 
                  style: ButtonStyle(
                    backgroundColor: WidgetStatePropertyAll(Colors.blue),
                    foregroundColor: WidgetStatePropertyAll(Colors.white)
                  ),
                  child: Text("Open BottomSheet")
                ),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: _openModelBottomSheet, 
                  style: ButtonStyle(
                    backgroundColor: WidgetStatePropertyAll(Colors.blue),
                    foregroundColor: WidgetStatePropertyAll(Colors.white)
                  ),
                  child: Text("Open Model BottomSheet")
                ),
                
              ]
            ),
            SizedBox(height: 16.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Text("Your choice is $_choiceString", style: TextStyle(fontSize: 18.0))
              ],
            )
          ],
        ),
      ),
    );
  }
}

效果图如下：

10.showSnackBar 的使用

代码如下：

import 'package:flutter/material.dart';

class SnackbarDemo extends StatefulWidget {
  const SnackbarDemo({super.key});

  @override
  State<SnackbarDemo> createState() => _SnackbarDemoState();
}

class _SnackbarDemoState extends State<SnackbarDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SnackBarDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SnackBarButton()
              ],
            )
          ],
        ),
      ),
    );
  }
}

class SnackBarButton extends StatelessWidget {
  const SnackBarButton({super.key});

  @override
  Widget build(BuildContext context) {
    return OutlinedButton(
      onPressed: (){
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('正在注册中....'),
            action: SnackBarAction(label: "OK", onPressed: (){}),
          ),
        );
      }, 
      child: Text("open SnackBar")
    );
  }
}

效果如下：

11. ExpansionPanelList 和 ExpansionPanel 的使用

代码如下：

import 'package:flutter/material.dart';


class ExpansionPanelItem {
  String headerText;
  Widget body;
  bool isExpanded;

  ExpansionPanelItem({required this.headerText, required this.body, required this.isExpanded});
}

class ExpansionpanelDemo extends StatefulWidget {
  const ExpansionpanelDemo({super.key});

  @override
  State<ExpansionpanelDemo> createState() => _ExpansionpanelDemoState();
}

class _ExpansionpanelDemoState extends State<ExpansionpanelDemo> {

  late List<ExpansionPanelItem> _expansionPanelItems;

  @override
  void initState() {
    super.initState();

    // 构造数据
    _expansionPanelItems = <ExpansionPanelItem>[
      ExpansionPanelItem(
        headerText: "Panel A", 
        body: Container(
          padding: EdgeInsets.all(16.0),
          width: double.infinity,
          child: Text("Content of Panel A"),
        ), 
        isExpanded: false
      ),
      ExpansionPanelItem(
        headerText: "Panel B", 
        body: Container(
          padding: EdgeInsets.all(16.0),
          width: double.infinity,
          child: Text("Content of Panel B"),
        ), 
        isExpanded: false
      ),
      ExpansionPanelItem(
        headerText: "Panel C", 
        body: Container(
          padding: EdgeInsets.all(16.0),
          width: double.infinity,
          child: Text("Content of Panel C"),
        ), 
        isExpanded: false
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ExpansionPanelDemo"),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ExpansionPanelList(
              expansionCallback: (panelIndex, isExpanded) => {
                setState(() {
                  _expansionPanelItems[panelIndex].isExpanded = isExpanded;
                })
              },
              children: _expansionPanelItems.map(
                (ExpansionPanelItem item) {
                  return ExpansionPanel(
                    isExpanded: item.isExpanded,
                    body: item.body,
                    headerBuilder:  (BuildContext context, bool isExpanded) {
                      return Container(
                        padding: EdgeInsets.all(16.0),
                        child: Text(item.headerText, style: TextStyle(fontSize: 18.0)),
                      );
                    }, 
                  );
                }
              ).toList(),
            )
          ],
        ),
      ),
    );
  }
}

效果图如下：