首页 > 其他 > 详细

Flutter从入门到入土(四)各种组件

时间:2020-05-21 09:35:51      阅读:70      评论:0      收藏:0      [点我收藏+]

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, width: 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

 

Flutter从入门到入土(四)各种组件

原文:https://www.cnblogs.com/smallstars/p/12927434.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!