美文网首页
Flutter - ListView5 - Expanded保持

Flutter - ListView5 - Expanded保持

作者: 西半球_ | 来源:发表于2020-02-14 10:25 被阅读0次
    demo 地址: https://github.com/iotjin/jh_flutter_demo

    效果图

    ListView5.png

    ListView5 代码

    import 'package:flutter/material.dart';
    import 'package:flutter_app/jhImageTool.dart';
    
    var dataArr;
    
    var phone = "1234xxxx1234";
    var address = "这是地址";
    var range = "这是描述这是描述";
    
    
    
    var adminData =
    [
      {
        "title": "title11",
        "icon": "service/icon_baoxiu",
        "bgImg": "service/bg_service_baoxiu"
      },
      {
        "title": "title22",
        "icon": "service/icon_gongdan",
        "bgImg": "service/bg_service_gongdan"
      },
      {
        "title": "title33",
        "icon": "service/icon_fuwufankui",
        "bgImg": "service/bg_service_fuwufankui"
      }
    ];
    
    
    
    class ListViewTest5![ListView5.png](https://img.haomeiwen.com/i12175332/62ef2323ccfae47e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
     extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar:AppBar(
              title:Text('这是标题')
          ),
          body:ContentBody(),
        );
      }
    }
    
    class ContentBody extends StatelessWidget {
    
      ContentBody({ Key key }) : super(key: key) {
        dataArr = adminData;
      }
    
    
      Widget _getWidget(context, index) {
    
        return  Container(
    //        color: Colors.red,
            padding: EdgeInsets.fromLTRB(20, 20, 20, 0),
            child:Container(
                decoration: BoxDecoration(
    //              color: Colors.grey,
    //              border: Border.all(width: 2.0, color: Colors.red),
                  borderRadius: BorderRadius.all( Radius.circular(5.0)),
                  image: DecorationImage(
                    fit: BoxFit.cover,
    //                image: NetworkImage("https://gitee.com/iotjh/Picture/raw/master/lufei.png"),
    //                  image: JhImageTool.getAssetImage("service/bg_service_gongdan"),
                    image: JhImageTool.getAssetImage(dataArr[index]["bgImg"]),
                  ),
                ),
                child: Center(
                  child: ListTile(
                      contentPadding: EdgeInsets.fromLTRB(40, 0, 0, 0),
                      title: Text(dataArr[index]["title"],style: TextStyle(color: Colors.white,fontSize: 20)),
                      leading:Image(image: JhImageTool.getAssetImage(dataArr[index]["icon"])),
                      onTap:() {
                        print("点击的index"+index.toString());
                      }
                  ) ,
                )
    
            )
        );
      }
    
      @override
      Widget build(BuildContext context) {
    //    return ListView.builder(
    //        itemCount: dataArr.length,
    //        itemExtent: 150.0, //强制高度为100.0
    //        itemBuilder: this._getWidget
    //    ),
    
        print(MediaQuery.of(context).size.height);
    //final size = MediaQuery.of(context).size;
    //final width = size.width;
    //final height = size.height;
    //print('width is $width; height is $height');
    
        return Container(
          color: Colors.yellow,
          height: MediaQuery.of(context).size.height,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Expanded(
                  child:
    //            Column(
    //              children: <Widget>[
    //                Container(
    //                  height: 200,
    //                  color: Colors.purple,
    //                )
    //              ],
    //            ),
                  ListView.builder(
                      itemCount: dataArr.length,
                      itemExtent: 150.0, //强制高度为100.0
                      itemBuilder: this._getWidget
                  )
    
              ),
    
              ///下面控件位于Column布局底部
              Container(
                color: Colors.blue,
                padding: EdgeInsets.fromLTRB(20, 0, 0, 50),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment : CrossAxisAlignment.start,
                  children: <Widget>[
                    Text("热线: ${phone}",style: TextStyle(fontSize: 20),textAlign: TextAlign.left),
                    SizedBox(height: 5),
                    Text("地址: ${address}",style: TextStyle(fontSize: 20),textAlign: TextAlign.left),
                    SizedBox(height: 5),
                    Text("描述: ${range}",style: TextStyle(fontSize: 20),textAlign: TextAlign.left),
                  ],
                ),
              )
            ],
          ),
        );
    
    
    
      }
    
    }
    
    Widget cell =Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage('images/service/lufei.png'),
    //    image: Image.network(""),
          fit: BoxFit.cover,
        ),
      ),
      child: Column(),
    );
    
    
    
    

    相关文章

      网友评论

          本文标题:Flutter - ListView5 - Expanded保持

          本文链接:https://www.haomeiwen.com/subject/wfhdfhtx.html