Flutter从入门到入土（四）各种组件

1、CustomScrollView（滚动组件）

Widget mainWidget(){
    return MaterialApp(
      home: Scaffold(
//        appBar: topBar(),
//        AppBar(
//          title: Text(
//            this.title,
//            textAlign: TextAlign.center,
//          ),
//          backgroundColor: Colors.greenAccent,
//        ),
        body: CustomScrollView(

          slivers: <Widget>[
//            this.topBar(),
            this.topAppBar(),
            //            this.renderTitle('成绩单'),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                      (context, index){
                    Container post;
                    if(index == 0){
                      post = itemTitleBar(user);
                    }else if (index == 1){
                      post = itemTitle();
                    }else if(index == int.parse(user._size)+2){
                      post = bottompage();
                    }else{
                      post = itemTable(index-2);
                    }
                    return post;
                  }
              ),
//              itemExtent: 20,
            )
          ],
        ),
      ),
    );
  }

 

  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（表格组件）

  Widget itemTable(int index){
    if(index < user._scores.length){
      return Container(
        padding: EdgeInsets.fromLTRB(10, 5, 5, 0),
        child: new Table(
          //设置一行中每个框宽度
          columnWidths: {
            0: FixedColumnWidth(200.0),
            1: FixedColumnWidth(75.0),
            2: FixedColumnWidth(75.0),
          },
//          border: TableBorder.all(color: Colors.red, width: 1.0, style: BorderStyle.solid),
          //对齐方式
          defaultVerticalAlignment: TableCellVerticalAlignment.middle,
          //循环渲染组件
          children: _tableRowList(index),
        ),
      );
    }

  }

  _tableRowList(int i){
    dynamic content;
    List<TableRow> Tlist = new List<TableRow>();

    content = TableRow(
      decoration: BoxDecoration(
        color: Colors.white,
      ),
      children: [
        Text(user._scores[i]._className,style: TextStyle(color: Colors.black,fontSize: 17,),),
        Center(
          child: Text(user._scores[i]._credit,style: TextStyle(color: Colors.black,fontSize: 20,),),
        ),
        Center(
          child: Text(user._scores[i]._score,style: TextStyle(color: Colors.black,fontSize: 20),),
        )
      ],
    );
    Tlist.add(content);

    return Tlist;
  }

 

参照：

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

child:RaisedButton(
  child: Text(
    '登录',
    style: TextStyle(
      fontSize: 30,
    ),
  ),
  color: Colors.white,

  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(25)),
  ),
  elevation: 10,
  onPressed: () {

    print('1');
  },

)