美文网首页
第三个app:做一个支持点击交互的列表页

第三个app:做一个支持点击交互的列表页

作者: 一个有想法的人 | 来源:发表于2019-01-26 18:17 被阅读0次
    // 做一个列表页
    import 'package:flutter/material.dart';
    import 'package:yunote/module/toast.dart';
    import 'package:english_words/english_words.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
    
        return MaterialApp(
          title:"我的第三个App",
          theme: ThemeData(
            primaryColor:Colors.blue
          ),
          home: MyHomePage(title:"列表展示")
        );
      }
    }
    
    
    void _addOverlay(BuildContext context, String info) async {
      //获取OverlayState
      OverlayState overlayState = Overlay.of(context);
      //创建OverlayEntry
      OverlayEntry _overlayEntry = OverlayEntry(
          builder: (BuildContext context) => Positioned(
                top: MediaQuery.of(context).size.height * 2 / 3,
                child: new Container(
                  margin: EdgeInsets.all(20),
                  padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
                  decoration: new BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    color: Color(0xFF6666666)
                  ),
                  child: Text(info, style: TextStyle(color: Colors.white, fontSize: 14.0,decoration: null))
                )
              ));
      //显示到屏幕上。
      overlayState.insert(_overlayEntry);
      //等待2秒
      await Future.delayed(Duration(seconds: 2));
      //移除
      _overlayEntry.remove();
    }
    
    
    class MyHomePage extends StatefulWidget {
    
      final String title;
      MyHomePage({Key key,this.title}): super(key:key);
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    
    List<Widget> makeList(BuildContext context) {
      List<Widget> result = List();
      for(int i=0;i<100;i++){
        String data = new WordPair.random().asPascalCase;
        result.insert(i, new GestureDetector(
          onTap:() {
            print("你点击了" + data);
            Toast.toast(context, data);
          },
          child: new Container(
            padding: EdgeInsets.all(20),
            decoration: new BoxDecoration(border: Border(bottom: BorderSide(
              color: const Color(0xFFEEEEEE),
              width: 1,
              style: BorderStyle.solid
            ))),
            child: Text(data)
          )
        ));
      }
      return result;
    }
    
    class _MyHomePageState extends State<MyHomePage> {
    
      @override
      Widget build(BuildContext context) {
        //返回一个列表
        return Scaffold(
          appBar: AppBar(title: Text(widget.title)),
          body: new Container(
            child: new ListView(
              children: makeList(context)
            ),
          )
        );
      }
    }
    

    效果:

    image.png

    附toast.dart代码:

    import 'package:flutter/material.dart';
    
    
    class Toast {
      static OverlayEntry _overlayEntry; //toast靠它加到屏幕上
      static bool _showing = false; //toast是否正在showing
      static DateTime _startedTime; //开启一个新toast的当前时间,用于对比是否已经展示了足够时间
      static String _msg;
      static void toast(
        BuildContext context,
        String msg,
      ) async {
        assert(msg != null);
        _msg = msg;
        _startedTime = DateTime.now();
        //获取OverlayState
        OverlayState overlayState = Overlay.of(context);
        _showing = true;
        if (_overlayEntry == null) {
          _overlayEntry = OverlayEntry(
              builder: (BuildContext context) => Positioned(
                    //top值,可以改变这个值来改变toast在屏幕中的位置
                    top: MediaQuery.of(context).size.height * 2 / 3,
                    child: Container(
                        alignment: Alignment.center,
                        width: MediaQuery.of(context).size.width,
                        child: Padding(
                          padding: EdgeInsets.symmetric(horizontal: 80.0),
                          child: AnimatedOpacity(
                            opacity: _showing ? 1.0 : 0.0, //目标透明度
                            duration: _showing
                                ? Duration(milliseconds: 100)
                                : Duration(milliseconds: 400),
                            child: _buildToastWidget(),
                          ),
                        )),
                  ));
          overlayState.insert(_overlayEntry);
        } else {
          //重新绘制UI,类似setState
          _overlayEntry.markNeedsBuild();
        }
        await Future.delayed(Duration(milliseconds: 2000)); //等待两秒
    
        //2秒后 到底消失不消失
        if (DateTime.now().difference(_startedTime).inMilliseconds >= 2000) {
          _showing = false;
          _overlayEntry.markNeedsBuild();
        }
      }
    
      //toast绘制
      static _buildToastWidget() {
        return Center(
          child: Card(
            color: Color(0xFF333333),
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
              child: Text(
                _msg,
                style: TextStyle(
                  fontSize: 14.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        );
      }
    }
    

    相关文章

      网友评论

          本文标题:第三个app:做一个支持点击交互的列表页

          本文链接:https://www.haomeiwen.com/subject/xuoijqtx.html