flutter TextButton样式

   style: ButtonStyle(
              //字体  这里设置颜色没用
              textStyle:
              MaterialStateProperty.all(TextStyle(fontSize: 36.sp,fontWeight: FontWeight.w700)),
              //字体颜色
              foregroundColor: MaterialStateProperty.all(Colors.white),
              //圆角弧度
              shape: MaterialStateProperty.all(
                  RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(WZP.setRpx(20)))),
              //背景颜色
                backgroundColor: MaterialStateProperty.all(
                    Colors.black),
               //边框
			        side: MaterialStateProperty.all(
			          BorderSide(
			              color: Colors.red,
			              width: 0.67),
			        ),
              //设置按钮的大小
              minimumSize: MaterialStateProperty.all(Size(WZP.setRpx(670), 			WZP.setRpx(120))),
            ),




### Flutter 代码样式最佳实践 在开发 Flutter 应用程序时,遵循良好的代码样式不仅有助于提高代码可读性和维护性,还能促进团队协作效率。以下是基于引用内容总结的一些关于 Flutter 代码样式的最佳实践及其示例。 #### 1. **命名规范** 清晰的变量名和方法名能够显著提升代码的可理解性。推荐使用描述性强的名字,并遵循 Dart 的命名约定(如 PascalCase 和 camelCase)[^1]。 ```dart // 不推荐 var a; a = 1; // 推荐 int userCount; userCount = 1; ``` #### 2. **状态管理和 UI 更新** 合理管理应用程序的状态对于构建高效的 Flutter 应用至关重要。可以采用 `setState` 来更新简单的界面变化,但对于更复杂的状态管理需求,则应考虑使用像 Riverpod 或 Provider 这样的框架[^1]。 ```dart class Counter extends StatefulWidget { @override _CounterState createState() => _CounterState(); } class _CounterState extends State<Counter> { int count = 0; void increment() { setState(() { count++; }); } @override Widget build(BuildContext context) { return Text('Count: $count'); } } ``` #### 3. **组件化设计** 将复杂的用户界面拆分为多个小型、独立的小部件(Widgets),这不仅可以增强代码重用性,还便于调试和测试。 ```dart class CustomButton extends StatelessWidget { final String label; final VoidCallback onPressed; const CustomButton({required this.label, required this.onPressed}); @override Widget build(BuildContext context) { return ElevatedButton( child: Text(label), onPressed: onPressed, ); } } ``` #### 4. **输入控件的最佳实践** 当涉及到用户输入时,`TextField` 和 `TextFormField` 是两个常用的控件。为了实现更好的用户体验,应该注意设置合适的装饰属性 (`decoration`) 并加入必要的验证逻辑[^2][^3]。 ```dart final TextEditingController emailController = TextEditingController(); @override Widget build(BuildContext context) { return Column( children: [ TextFormField( controller: emailController, decoration: InputDecoration( labelText: 'Email', border: OutlineInputBorder(), ), validator: (value) { if (!RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$').hasMatch(value!)) { return 'Please enter valid email'; } return null; }, ), SizedBox(height: 16), ElevatedButton( onPressed: () {}, child: Text('Submit'), ) ], ); } ``` #### 5. **对话框的设计与交互** 如果需要向用户提供额外的信息或者请求确认动作,可以使用 `AlertDialog`。它允许开发者高度自定义其布局并响应用户的互动[^4]。 ```dart void showConfirmationDialog(BuildContext context) async { bool? result = await showDialog<bool>( context: context, builder: (BuildContext context) { return AlertDialog( title: Text('Confirm Action'), content: Text('Are you sure to proceed?'), actions: <Widget>[ TextButton( child: Text('Cancel'), onPressed: () => Navigator.pop(context, false), ), TextButton( child: Text('Proceed'), onPressed: () => Navigator.pop(context, true), ), ], ); }, ); if (result ?? false) { // 执行相应操作... } } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值