前言
在现代移动应用开发中，用户界面的设计与交互体验息息相关。Flutter作为一个高效的跨平台框架，提供了多种常用的UI组件与功能，使得开发者能够快速构建交互丰富的应用程序界面。
进度指示器
线性
Widget buildLinearProgress(){ return Container( width: 300, height: 10, child: LinearProgressIndicator( valueColor: new AlwaysStoppedAnimation<Color>(Colors.blue), backgroundColor: Color(0xff00ff00), minHeight: 10, ), ); }
圆形
Widget buildCircularProgress(){ return Container( width: 55, height: 55, child: const CircularProgressIndicator( valueColor: AlwaysStoppedAnimation<Color>(Colors.blue), backgroundColor: Color(0xff00ff00), // 圆圈的宽 strokeWidth: 6.0, ), ); }
下拉框刷新
return Scaffold( appBar: AppBar( title: Text('下拉刷新'), ), body: RefreshIndicator( color: Colors.blue, backgroundColor: Colors.grey[200], onRefresh: () async { await Future.delayed(Duration(milliseconds: 1000)); return Future.value(true); }, child: SingleChildScrollView( child: Container( width: 300, height: 300, ), ), ), );
选项按钮
单选按钮Radio
class MyTest extends StatefulWidget { const MyTest({Key? key}) : super(key: key); @override State<MyTest> createState() => _MyTestState(); } class _MyTestState extends State<MyTest> { int _groupValue=0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("title"), ), body: Row( children: [ // 给一个形参 用来记录 得到的值 Radio(value: 0, groupValue: _groupValue, onChanged: (v){ setState(() { this._groupValue=v!; print("you choose is boy"); }); }), Text("boy"), Radio(value: 1, groupValue: _groupValue, onChanged: (v){ setState(() { this._groupValue=v!; print("you choose is girl"); }); }), Text("girl"), ], ), ); } }
RadioListTitle
复选框
bool checkIsSelect=false; Widget buildCheckedBox(){ return Checkbox( value: checkIsSelect, activeColor: Colors.red, checkColor: Colors.yellow, onChanged: (value){ setState(() { checkIsSelect=value!; print(checkIsSelect); }); }); }
加属性为
CheckboxListTitle
bool checkIsSelect=false; Widget buildCheckedBox(){ return CheckboxListTile( value: checkIsSelect, activeColor: Colors.red, checkColor: Colors.yellow, title: Text("title"), subtitle: Text("sub title"), secondary: Icon(Icons.home), onChanged: (value){ setState(() { checkIsSelect=value!; print(checkIsSelect); }); }); }
开关switch
bool switchValue = true; Switch _switch() { return Switch( activeColor: Colors.red, value: switchValue, onChanged: (value) { switchValue = !switchValue; setState(() { print(switchValue); }); }); }
用SwitchListTitle 可使用更多的属性
Switch(value: isSelected, onChanged: (value){ setState(() { isSelected=value; print(isSelected); }); })
手势识别
Widget buildGestureDetector(){ return GestureDetector( // 手指抬起来 触发 onTap: (){ print('hello'); }, child: Container( width: 100, height: 100, child: Image.asset( "imgs/laying.jpg" ), ), ); }
ink 和inkwell
Widget test(){ return new Material( // ink 用来处理 图片 child: new Ink( width: 300, height: 300, color: Colors.blue, //InkWell 用来处理 回调 child: new InkWell( onTap: (){ debugPrint("hello"); }, child: Container( width: 30, height: 30, alignment: Alignment(0,0), child: Text("login",style: TextStyle(color: Colors.white),), ), ), ), ); }
提示
Widget test() { return Scaffold( body: Center( child: Tooltip( message: '这是一个提示', verticalOffset: 16, child: ElevatedButton( onPressed: () { print("hello"); }, child: Text("click me"), ), ), ), ); }
offstage
在Flutter中，Offstage是一个用于控制子组件是否显示的小部件。它有一个offstage属性，用于指定子组件是否应该被隐藏。 当offstage属性为true时，子组件将被隐藏，不会被渲染和响应用户交互事件。当offstage属性为false时，子组件将正常显示和响应交互事件。
