Flutter 布局记录

此贴为自己学习记录flutter所写布局 里面有基本平时常用布局的一些效果和一些组件属性，加了刷新和加载。


class Home_page extends StatelessWidget {
  const Home_page({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Home'),
          centerTitle: true,
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 10),
              child: IconButton(
                icon: Icon(Icons.search),
                onPressed: () {
                  print('shousuo');
                  showSearch(context: context, delegate: searchDemo());
                },
              ),
            )
          ],
        ),
        body: HttpNet());
  }
}

class HttpNet extends StatefulWidget {
  @override
  _HttpNetState createState() => _HttpNetState();
}

class _HttpNetState extends State<HttpNet> {
  List<Data> _data = [];

  //上拉加载
  ScrollController _scrollController;

  @override
  void initState() {
    super.initState();
    _httpData();
    //上拉加载
    _scrollController = ScrollController()
      ..addListener(() {
        //判断是否滑到底
        if (_scrollController.position.pixels ==
            _scrollController.position.maxScrollExtent) {
          _loadMore();
        }
      });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
        displacement: 10,
        child: _data == null || _data.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                controller: _scrollController,
                //上拉加载时需要+1
                itemCount: _data.length+1,
                itemBuilder: (BuildContext context, int index) {
                  //判断为上拉加载时逻辑
                  if(index == _data.length){
                    return Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Center(
                        child: CircularProgressIndicator(),
                      ),
                    );
                  }
                  return buildColumn(index);
                },
              ),
        onRefresh: _httpData);
  }

  Column buildColumn(int index) {
    return Column(
      children: [
        Container(
          padding: EdgeInsets.all(5),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              buildHeaderContent(index),
              SizedBox(height: 10),
              buildContentRow(index),
              SizedBox(height: 10),
              buildContainer(index),
            ],
          ),
        ),
        SizedBox(height: 15),
     //4 最底部横线
        Divider(
          color: Colors.black12,
          height: 5,
          thickness: 10,
        ),
      ],
    );
  }

  //3为灰色背景加文字
  Container buildContainer(int index) {
    return Container(
        padding: EdgeInsets.only(left: 10, right: 10),
        alignment: Alignment.centerLeft,
        height: 40,
        decoration: BoxDecoration(
            color: Colors.black12, borderRadius: BorderRadius.circular(2)),
        child: Text(
          "${_data[index].name}:Whatever is worth doing is worth doing well",
          style: TextStyle(color: Colors.black45, height: 1.2),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ));
  }

  //2.1和2.4没做分离  红色字体为左边图片，蓝色为右边图标加文字
  Row buildContentRow(int index) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        ClipRRect(
          borderRadius: BorderRadius.circular(5),
          child: Image.network(
            "https://www.wanandroid.com/resources/image/pc/default_project_img.jpg",
            fit: BoxFit.cover,
            height: 150,
            width: 100,
          ),
        ),
        SizedBox(width: 10),
        Expanded(child: dierduan(index)),
        Container(
            height: 130, child: VerticalDivider(color: Colors.lightGreen)),
        Container(
          height: 100,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.collections_sharp, size: 30, color: Colors.orange),
              Text(
                '想看',
                style: TextStyle(
                    color: Colors.orange,
                    fontWeight: FontWeight.bold,
                    fontSize: 18),
              )
            ],
          ),
        ),
      ],
    );
  }

  //2.2中评分加下方简介，评分没做
  Column dierduan(int index) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        buildTextTitle(index),
        Text("⭐⭐⭐⭐⭐${_data[index].courseId}"),
        Text(
          "${_data[index].name}/${_data[index].id}/${_data[index].visible}/${_data[index].order}",
          overflow: TextOverflow.ellipsis,
          maxLines: 2,
        ),
      ],
    );
  }

  //2.2中黑色粗体名字
  Text buildTextTitle(int index) {
    return Text.rich(TextSpan(children: [
      WidgetSpan(
        child: Icon(Icons.play_circle_outline, color: Colors.red, size: 20),
      ),
      TextSpan(
          text: _data[index].name,
          style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.black87)),
      TextSpan(
          text: "(${_data[index].order})",
          style: TextStyle(fontSize: 16, color: Colors.grey)),
    ]));
  }

  //1  头部的布局
  Container buildHeaderContent(int index) {
    return Container(
      margin: EdgeInsets.only(left: 5),
      padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
      decoration: BoxDecoration(
          color: Color.fromARGB(255, 238, 205, 144),
          borderRadius: BorderRadius.circular(5)),
      child: Text(
        "排名：${_data[index].id}",
        style: TextStyle(
            fontSize: 14,
            color: Color.fromARGB(255, 131, 95, 36),
            fontWeight: FontWeight.bold),
      ),
    );
  }
  Future _httpData() async {
    ResultData res = await HttpManager.getInstance()
        .get(Address.TEST_API, withLoading: false);
    WanAnZhuoBean wanAnZhuoBean = WanAnZhuoBean.fromJson(res.data);
    setState(() {
      _data = wanAnZhuoBean.data;
    });
  }

  Future _loadMore() async {
    ResultData res = await HttpManager.getInstance()
        .get(Address.TEST_API, withLoading: false);
    WanAnZhuoBean wanAnZhuoBean = WanAnZhuoBean.fromJson(res.data);
    setState(() {
      _data.addAll(wanAnZhuoBean.data);
    });
  }

  @override
  void dispose() {
    super.dispose();
    _scrollController.dispose();
  }
}