资讯专栏INFORMATION COLUMN

【Flutter】开发之进阶Widget(三)

Awbeci / 671人阅读

摘要:页面销毁时,销毁控制器在中声明省略省略在中使用省略省略扩展底部可以使用的属性你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

前言

在上一篇中,我们了解了常用的Widget,这一篇,我们从实际案例出发,来深入学习下Widget

案例1 模拟登陆

先看效果图

1.我们需要2个输入框,1个按钮 这里用到的都是之前说过的Widget,就直接贴代码了,建议先看这篇【Flutter】开发之基础Widget(二)

class LoginDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("LoginDemo"),
      ),
      body: Container(
        margin: EdgeInsets.all(15),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Padding(
              padding: EdgeInsets.only(top: 100),
            ),
            TextField(
              decoration: InputDecoration(
                  hintText: "请输入账户",
                  hintStyle: TextStyle(color: Colors.black45),
                  contentPadding: EdgeInsets.all(10),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4),
                  )),
            ),
            Padding(
              padding: EdgeInsets.only(top: 15),
            ),
            TextField(
              //显示*号
              obscureText: true,
              decoration: InputDecoration(
                  hintText: "请输入密码",
                  hintStyle: TextStyle(color: Colors.black45),
                  contentPadding: EdgeInsets.all(10),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(4),
                  )),
            ),
            Padding(
              padding: EdgeInsets.only(top: 50),
            ),
            FlatButton(
              child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(10)),
                child: Container(
                  height: 50,
                  width: 300,
                  decoration: BoxDecoration(color: Colors.deepOrangeAccent),
                  alignment: AlignmentDirectional.center,
                  child: Text(
                    "登录",
                    style: TextStyle(
                      fontSize: 18,
                      color: Colors.white,
                      backgroundColor: Colors.deepOrangeAccent,
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

2.需要获取输入的内容

这里有2个方法

1). 处理 onChanged回调

        TextField(
            //文字改变时调用
            onChanged: (String content) {
              print("content=" + content);
            }

2). 提供一个TextEditingController

TextEditingController user = new TextEditingController();
        TextField(
         ...省略...
              controller: user ,
         ...省略...
          )

然后通过user.text方法即可取得输入内容。

3.点击事件

1).可以通过onPressed实现

            FlatButton(
              onPressed: () {
                //显示弹窗
                _showDialog(context);
              })

注:Flutter 的语法是 DartDart 不像 Java ,没有关键词 publicprivate 等修饰符,_ 下横线代表 private ,但是有 @protected 注解。 然后,我们需要判断密码是否大于6位,如不是,弹窗提示

  void _showDialog(BuildContext context) {
    if (pwd.text.length < 6) {
      showDialog(
        context: context,
        builder: (BuildContext content) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("输入的密码不能小于6位"),
          );
        },
      );
    }
}

正常的逻辑来说,弹出窗中应该有按钮,点击重新输入,但是却发现,有的Widget没有点击事件,这时,我们可以通过在外面嵌套GestureDetector来处理,GestureDetector还有更多的功能,这个我们后面再说 2).嵌套GestureDetector

  void _showDialog(BuildContext context) {
    if (pwd.text.length < 6) {
      showDialog(
        context: context,
        builder: (BuildContext content) {
          return AlertDialog(
            title: Text("提示"),
            content: Text("输入的密码不能小于6位"),
            actions: [
              GestureDetector(
                child: Container(
                  child: Text("重新输入"),
                ),
                onTap: () {
                  pwd.clear();
                  //关闭弹窗
                  Navigator.of(context).pop();
                },
              ),
            ],
          );
        },
      );
    }
  }
案例2 Table 页

先看效果图

1.TabBar 上半部分使用的是AppBar+TabBar,详细代码如下:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("TableDemo"),
          bottom: TabBar(
            //可以滑动
            isScrollable: true,
            //边距
            labelPadding: EdgeInsets.only(right: 0),
            //颜色
            labelColor: Colors.orangeAccent,
            //样式 选中的
            labelStyle: TextStyle(fontSize: 18),
            //点击事件
            onTap: (index) {
              
            },
            //未选中的颜色
            unselectedLabelColor: Colors.pink,
            //未选中样式
            unselectedLabelStyle: TextStyle(fontSize: 14),
            //指示器的宽度
            indicatorSize: TabBarIndicatorSize.tab,
            //指示器颜色
            indicatorColor: Colors.amber,
            //指示器高度
            indicatorWeight: 2,

            tabs: [
              Container(
                width: 100,
                height: 40,
                child: Center(
                  child: Text("MODEL 1"),
                ),
              ),
              Container(
                width: 100,
                height: 40,
                child: Center(
                  child: Text("MODEL 2"),
                ),
              ),
              Container(
                width: 100,
                height: 40,
                child: Center(
                  child: Text("MODEL 3"),
                ),
              ),
            ],
          ),
        ),
  }

2.PageView

用法类似于ListView

PageView.builder

PageView.custom

PageView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Center(
              child: Text("PAGE ${index}"),
            ),
          );
        },
        itemCount: 5,
        onPageChanged: (indext) {},
      ),

方便起见,我们这里使用的是children

  Widget _pageView() {
    return PageView(
      children: [
        Container(
          color: Colors.blue,
          alignment: AlignmentDirectional.center,
          child: Text("PAGE 1"),
        ),
        Container(
          color: Colors.deepPurpleAccent,
          alignment: AlignmentDirectional.center,
          child: Text("PAGE 2"),
        ),
        Container(
          color: Colors.lightGreen,
          alignment: AlignmentDirectional.center,
          child: Text("PAGE 3"),
        ),
      ],
      onPageChanged: (index) {
   
      },
    );
  }

3.TabBarPageView 联动

PageView的控制使用的是PageController

1).初始化

PageController pageController = new PageController();

2).在PageView中声明

PageView(
            ...省略...
      controller: pageController,
            ...省略...
)

3).在TabBar中使用

      TabBar(
            ...省略...
            //点击事件
            onTap: (index) {
              pageController.jumpToPage(index);
            },
             ...省略...
      )

TabBar的控制使用的是TabController

需要注意

我们的父级Widget必须是继承StatefulWidget;需要实现SingleTickerProviderStateMixin

1).初始化

class TableDemo extends StatefulWidget {
  @override
  _TableDemoState createState() => _TableDemoState();
}

class _TableDemoState extends State<TableDemo>
    with SingleTickerProviderStateMixin {
  TabController _tabController;

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

    ///初始化时创建控制器
    ///通过 with SingleTickerProviderStateMixin 实现动画效果。
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  void dispose() {
    ///页面销毁时,销毁控制器
    _tabController.dispose();
    super.dispose();
  }
}

2).在TabBar中声明

TabBar(
            ...省略...
      controller: _tabController,
            ...省略...
)

3).在PageView中使用

      PageView(
            ...省略...
      onPageChanged: (index) {
        _tabController.animateTo(index);
      },
             ...省略...
      )

4.扩展 底部Table 可以使用ScaffoldbottomNavigationBar属性

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("TableDemo"),
      ),
      body: _pageView(),
      bottomNavigationBar: Container(
        height: 40,
        child: Center(
          child: _tabView(),
        ),
      ),
    );
  }
你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/7310.html

相关文章

  • 计划在2021年进行响应式开发?但不确定应该选择哪种技术来快速且低成本的开发应用程序?一文给你解决问

    摘要:与此同时,因新冠疫情的影响使得用户对移动应用程序的需求激增。调查报告显示年移动应用程序已经产生了亿美元的收入,预计到年将产生亿美元的收入。 引言 计划在2021年进...

    Codeing_ls 评论0 收藏0
  • Flutter是跨平台开发终极选吗?Android开发该如何快速上手Flutter

    摘要:月日,谷歌正式发布了的。到底能不能成为跨平台开发终极之选是基于前端诞生的,但是对前端开发来说,的环境配置很麻烦,需要原生的平台知识,还要担心遇上网络问题。现在已经不是曾经的小众框架,这两年里它已经逐步成长为主流的跨平台开发框架之一。 ...

    luckyyulin 评论0 收藏0
  • Flutter开发实战Widget(四)

    摘要:开发之目录页面跳转的页面跳转,主要是通过来实现,类似原生中的路由,分为静态和动态种方式。添加添加,这时,就可以这样使用你的认可,是我坚持更新博客的动力,如果觉得有用,就请点个赞,谢谢 前言 这一篇,我们说说开发中会用到的地方。 【Flutter】开发之目录 页面跳转 Flutter的页面跳转,主要是通过Navigator来实现,类似原生中的路由,分为静态和动态2种方式。 静态 首先...

    funnyZhang 评论0 收藏0
  • Flutter基础(二)Flutter最新开发环境搭建和Hello World

    摘要:注释处的方法是程序的入口,使用了符号,这是中单行函数或方法的简写,等价于如下代码方法是框架的入口,如果不返回方法,那么执行的是一个控制台应用。 本文首发于微信公众号「刘望舒」 前言 最近的Google I/O大会上,Flutter1.5 开始支持移动、Web、桌面和嵌入式设备,从不温不火的sky一直进化到如今热门的Flutter,Flutter的发展已经超出很多人的想象。我对跨平台技术一...

    tuomao 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<