flutter各个控件的初始化(不断补充中)

 

各控件的初始化,方法很多,属性也不尽一致,只是自己写例子时候用到并且为了加深印象而写的,方法一一记录如下(发现新的更方便的随时更改):

 imageView:

class InitImageView extends StatefulWidget {
  @override
  _InitImageViewState createState() => _InitImageViewState();
}

class _InitImageViewState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Image(
        image: NetworkImage("url"),
        fit: BoxFit.fill,
        alignment: Alignment.bottomCenter,
        height: 80,
        width: 100,
      ),
    );
  }
}

listView:

//listView
class InitListView extends StatefulWidget {
  @override
  _InitListViewState createState() => _InitListViewState();
}

class _InitListViewState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new ListView.builder(
        itemBuilder: (context,index){
          return new ListViewItem();
        },
        itemCount: 30,
      ),
    );
  }
}

class ListViewItem extends StatefulWidget {
  @override
  _ListViewItemState createState() => _ListViewItemState();
}

class _ListViewItemState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Text(
      "这是一段文字用来给Text这个文本显示用的",
      style: TextStyle(fontSize: 15,fontWeight: FontWeight.bold),
      textAlign: TextAlign.justify,
      softWrap: true,
      ),
    );
  }
}

 

Text:


//Text
class InitText extends StatefulWidget {
  @override
  _InitTextState createState() => _InitTextState();
}

class _InitTextState extends State {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: new Text(
      "这是一段文字用来给Text这个文本显示用的",
      style: TextStyle(fontSize: 15,fontWeight: FontWeight.bold),
      textAlign: TextAlign.justify,
      softWrap: true,
      ),
    );
  }
}

APPbar:就是导航栏

Widget _naviBar(){
    return AppBar(
      title: Text("横向滑动",style: TextStyle(fontSize: 15,fontWeight: FontWeight.bold),),
      elevation: 0,
    );
  }

 

tabview:TabBar的view

Widget _tabView(){
    return TabBarView(
      controller: tabCtl,
      children: titles.map((item){
        return Container(
          color: Colors.red,
          child: Center(
            child: Text(
              item,
              style: TextStyle(
                fontSize: 15,
                fontWeight: FontWeight.bold
              ),
            ),
          ),
        );
      }).toList(),
    );
  }

一个随机变色的color:

Color _getColor(){
    var random = new Random();
    int r = random.nextInt(255);
    int g = random.nextInt(255);
    int b = random.nextInt(255);
    print(r);
    print(g);
    print(b);
    return Color.fromARGB(255, r, g, b);
  }

实现ios中一个tableview+header+footer的样式:使用CustomScrollView

SliverList 高度自动

SliverFixedExtentList 高度固定死,itemExtent属性就是高度设置

其他文章请查看个人博客:http://zhangqq166.cn/

你可能感兴趣的:(Flutter)