【Flutter】开发之进阶Widget（四）

时间 2019-11-07

标签 Flutter 开发进阶 widget 繁體版

原文原文链接

前言

在上一篇中，咱们了解了经常使用的Widget，这一篇，咱们从实际案例出发，来深刻学习下Widget。java

案例1 模拟登录

先看效果图app

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: <Widget>[
            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个方法less

1）. 处理 onChanged回调ide

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

2）. 提供一个TextEditingController学习

TextEditingController user = new TextEditingController();
        TextField(
         ...省略...
              controller: user ,
         ...省略...
          )
复制代码

而后经过user.text方法便可取得输入内容。动画

3.点击事件

1）.能够经过onPressed实现ui

FlatButton(
              onPressed: () {
                //显示弹窗
                _showDialog(context);
              })
复制代码

注：Flutter 的语法是 Dart，Dart 不像 Java ，没有关键词 public、private 等修饰符，_ 下横线表明 private ，可是有 @protected 注解。 而后，咱们须要判断密码是否大于6位，如不是，弹窗提示this

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）.嵌套GestureDetectorspa

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

案例2 Table 页

先看效果图 code

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: <Widget>[
              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: <Widget>[
        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.TabBar和PageView 联动

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 可使用Scaffold的bottomNavigationBar属性

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TableDemo'),
      ),
      body: _pageView(),
      bottomNavigationBar: Container(
        height: 40,
        child: Center(
          child: _tabView(),
        ),
      ),
    );
  }
复制代码

【Flutter】开发之进阶Widget（四）

前言

案例1 模拟登录

案例2 Table 页

你的承认，是我坚持更新博客的动力，若是以为有用，就请点个赞，谢谢