继续趁着等后端修bug的等待情况下,继续看flutter的视频教程。今天想实现一个简单弹窗效果,学习了一些视频教程。为了控制这个代码量,尽量保持到少量一点代码去接触flutter。避免一下子看不习惯的代码造成代码书写困扰。下面就是一个很小的代码,尽量保持100行左右。保障到自身初学不会太吃力,做做练习题那样。

实现一个简单弹窗交互功能。


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(MyApp());
}

//开始结构
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       home: Scaffold(
         appBar: AppBar(title: Text("合同应用"),),
         body:HomeContent(),
       ),
    );
  }
}

//简化组件使用
class HomeContent extends StatelessWidget{

  _onClick(){
    print("点击了按钮");
  }

  _onItemClick(){
    print("点击了按钮");
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        ListTile(
          leading:Image.network("https://img12.360buyimg.com/n1/jfs/t1/44303/14/1165/281427/5cc53c63Eb79cabfb/a2a8c2f082c16238.jpg"),
          title: Text("Java开发宝典"),
          subtitle: Text("人民出版社"),
          onTap: (){
            showDialog(
                context: context,
                builder:(context){
                  return AlertDialog(
                    title: Text("提示"),
                    content: Text("是否真的移除该数据?"),
                  );
                },
            );
          },
        )
        ,
        ListTile(
          leading:Image.network("https://img12.360buyimg.com/n1/jfs/t1/44303/14/1165/281427/5cc53c63Eb79cabfb/a2a8c2f082c16238.jpg"),
          title: Text("Go开发宝典"),
          subtitle: Text("工业出版社"),
          onTap:_onItemClick
        ),
        // ,
        FlatButton(onPressed: _onClick, child: Text("查看更多"))
      ],
    );
  }
}

以下是弹窗的代码。需要有context的填写。(但是为何要这样?心里会觉得一阵啰嗦)
在这里插入图片描述
使用showDialog弹窗。

  showDialog(
      context: context,
      builder:(context){
         return AlertDialog(
                    title: Text("提示"),
                    content: Text("是否真的移除该数据?"),
                  );
                },
            );
     },

一个简单效果已经出来了。
在这里插入图片描述

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐