Flutter Callback 示例代码

App主体,因为只是做示例,没有做页面变化的效果,所以使用了StatelessWidget这个类

class myApp extends StatelessWidget {

  String actionName;
  //declare & create object
  Lee classLee = new Lee();
  //create string only array
  List<String> actions = ['First Button Click','Second Button Click','Third Button Click'];

  void onPressFirstBtn(){
    classLee.action_name = actions[0];
    classLee.action();
  }
  void onPressSecondBtn(){
    classLee.action_name = actions[1];
    classLee.action();
  }
  void onPressThirdBtn(){
    classLee.action_name = actions[2];
    classLee.action();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: AppBar(
        title: Text('Bar Title'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            new MyButton(
              onPress: onPressFirstBtn,
              title: Text('First_Btn'),
              icon: Icon(Icons.favorite),
            ),
            new MyButton(
              onPress: onPressSecondBtn,
              title: Text('Second_Btn'),
              icon: Icon(Icons.favorite),
            ),
            new MyButton(
              onPress: onPressThirdBtn,
              title: Text('third_Btn'),
              icon: Icon(Icons.favorite),
            )
          ],
        ),
      ),
    );
  }
}

###按钮,其中声明了回调函数onPress,并将其与其它属性放入该类的构造方法中

class MyButton extends StatelessWidget {

  //callback
  @required VoidCallback onPress;
  Text title;
  Icon icon;
  //constructor
  MyButton({this.onPress,this.title,this.icon});
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          new FlatButton(
            onPressed: onPress,//这里为回调函数的使用,即每次按钮触发点击事件则调用回调函数
            color: Colors.pink[100],
            child: new Column(
              children: <Widget>[
                this.title,
                this.icon
              ],
            ),
          ),
        ],
      ),
    );
  }
}

最后这个类为测试使用,不同的按钮点击会log出不同的actionName

class Lee{
  String action_name;
  Lee({this.action_name});

  void action() {
    print('$action_name');
  }
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个使用Flutter开发的示例代码: ```dart import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter示例', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage(), ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { List<String> repositories = []; // 用于存储库列表 @override void initState() { super.initState(); fetchRepositories(); // 获取存储库列表 } void fetchRepositories() async { // 使用http库发送网络请求 var response = await http.get('https://api.github.com/users/myusername/repos'); if (response.statusCode == 200) { // 如果请求成功,解析返回的JSON数据 List<dynamic> json = jsonDecode(response.body); List<String> repos = json.map((repo) => repo['name']).toList(); setState(() { repositories = repos; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('存储库列表'), ), body: ListView.builder( itemCount: repositories.length, itemBuilder: (context, index) { return ListTile( title: Text(repositories[index]), onTap: () { // 导航到存储库详情页面 Navigator.push( context, MaterialPageRoute( builder: (context) => RepositoryDetailPage(repositoryName: repositories[index]), ), ); }, ); }, ), ); } } class RepositoryDetailPage extends StatelessWidget { final String repositoryName; RepositoryDetailPage({required this.repositoryName}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(repositoryName), ), body: WebView( url: 'https://github.com/myusername/$repositoryName', ), ); } } ``` 这个示例代码展示了如何使用Flutter开发一个简单的应用程序。它包括显示用户的存储库列表,显示用户个人资料,以及显示每个存储库的详细信息。代码中使用了一些常用的Flutter库,如http用于网络请求,flutter_webview_plugin用于加载静态页面,flutter_swiper用于实现轮播效果。你可以根据自己的需求进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [flutter_github:使用GitHub API的Flutter项目示例](https://download.csdn.net/download/weixin_42104947/18224673)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Flutter 完整示例](https://blog.csdn.net/Android_SE/article/details/100773959)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值