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 )

每天进步一点点