zoukankan      html  css  js  c++  java
  • Flutter从入门到入土(四)各种组件

    1、CustomScrollView(滚动组件)

     1 Widget mainWidget(){
     2     return MaterialApp(
     3       home: Scaffold(
     4 //        appBar: topBar(),
     5 //        AppBar(
     6 //          title: Text(
     7 //            this.title,
     8 //            textAlign: TextAlign.center,
     9 //          ),
    10 //          backgroundColor: Colors.greenAccent,
    11 //        ),
    12         body: CustomScrollView(
    13 
    14           slivers: <Widget>[
    15 //            this.topBar(),
    16             this.topAppBar(),
    17             //            this.renderTitle('成绩单'),
    18             SliverList(
    19               delegate: SliverChildBuilderDelegate(
    20                       (context, index){
    21                     Container post;
    22                     if(index == 0){
    23                       post = itemTitleBar(user);
    24                     }else if (index == 1){
    25                       post = itemTitle();
    26                     }else if(index == int.parse(user._size)+2){
    27                       post = bottompage();
    28                     }else{
    29                       post = itemTable(index-2);
    30                     }
    31                     return post;
    32                   }
    33               ),
    34 //              itemExtent: 20,
    35             )
    36           ],
    37         ),
    38       ),
    39     );
    40   }
      Widget topAppBar() {
        return SliverAppBar(
          //图标设置
          leading: new IconButton(
              icon: Image.asset('assets/image/back.png'),
              onPressed: (){
                print('返回');
              }
          ),
          //Bar的颜色
          backgroundColor: Color.fromARGB(255, 150, 0, 0),
          pinned: true,
          elevation: 0,
          //整个Bar的高度
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            title: new Text(
              '成绩查询',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
              ),
            ),
            centerTitle: true,
            //向上滑的时候如何效果
            collapseMode: CollapseMode.pin,
            //Bar的图片,如果有透明度的话和Bar组合
            background: Image.network(
              url,
              fit: BoxFit.contain,
            ),
          ),
        );
      }

    详细参照:https://segmentfault.com/a/1190000019902201

    2、Table(表格组件)

     1   Widget itemTable(int index){
     2     if(index < user._scores.length){
     3       return Container(
     4         padding: EdgeInsets.fromLTRB(10, 5, 5, 0),
     5         child: new Table(
     6           //设置一行中每个框宽度
     7           columnWidths: {
     8             0: FixedColumnWidth(200.0),
     9             1: FixedColumnWidth(75.0),
    10             2: FixedColumnWidth(75.0),
    11           },
    12 //          border: TableBorder.all(color: Colors.red,  1.0, style: BorderStyle.solid),
    13           //对齐方式
    14           defaultVerticalAlignment: TableCellVerticalAlignment.middle,
    15           //循环渲染组件
    16           children: _tableRowList(index),
    17         ),
    18       );
    19     }
    20 
    21   }
     1   _tableRowList(int i){
     2     dynamic content;
     3     List<TableRow> Tlist = new List<TableRow>();
     4 
     5     content = TableRow(
     6       decoration: BoxDecoration(
     7         color: Colors.white,
     8       ),
     9       children: [
    10         Text(user._scores[i]._className,style: TextStyle(color: Colors.black,fontSize: 17,),),
    11         Center(
    12           child: Text(user._scores[i]._credit,style: TextStyle(color: Colors.black,fontSize: 20,),),
    13         ),
    14         Center(
    15           child: Text(user._scores[i]._score,style: TextStyle(color: Colors.black,fontSize: 20),),
    16         )
    17       ],
    18     );
    19     Tlist.add(content);
    20 
    21     return Tlist;
    22   }

    参照:

      Table组件:https://blog.csdn.net/kangshaojun888/article/details/86699064

      循环遍历:https://baijiahao.baidu.com/s?id=1641814439649294416&wfr=spider&for=pc

    3、Dialog(弹窗组件)

    定义弹出的东西:

    @override
    Widget build(BuildContext context){
      if (booksList[0].status=='null'){
        return Center(
          child: Container(
            height: 200,
             300,
            color: Colors.white,
            child: Center(
              child: Text(
                '暂无在架,请一段时间后再查询',
                style: TextStyle(
                  color: Colors.black,
                  decoration: TextDecoration.none,
                  fontSize: 19,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ),
    
        );
      }else{
        return Center(
          child: ListView.builder(
              itemCount: booksList.length,
              itemBuilder: (context, index){
                return _books(index);
              }
          ),
        );
      }
    }

    弹出:使用showDialog

    if(bookInfo != null){
      setState(() {
        print('setState!');
        showDialog(
            context: this.context,
            builder: (BuildContext context){
              print('bookname: $bookName');
              return BookInfoDialog(
                bookName,
                bookInfo._bookInfoPayload._bookHold,
              );
            }
        );
      });
    }
    

    参考:https://www.jianshu.com/p/4bbbb5aa855d

    4、按钮组件

      RaisedButton:

     1 child:RaisedButton(
     2   child: Text(
     3     '登录',
     4     style: TextStyle(
     5       fontSize: 30,
     6     ),
     7   ),
     8   color: Colors.white,
     9 
    10   shape: RoundedRectangleBorder(
    11     borderRadius: BorderRadius.all(Radius.circular(25)),
    12   ),
    13   elevation: 10,
    14   onPressed: () {
    15 
    16     print('1');
    17   },
    18 
    19 )

    每天进步一点点
  • 相关阅读:
    查看端口有没有被占用
    微信公众号2()
    How to insert a segment of noise to music file
    puppet practice
    Docker Commands
    LempelZiv algorithm realization
    The algorithm of entropy realization
    Java network programmingguessing game
    Deploy Openstack with RDO and Change VNC console to Spice
    puppet overview
  • 原文地址:https://www.cnblogs.com/smallstars/p/12927434.html
Copyright © 2011-2022 走看看