美文网首页
flutter-样式

flutter-样式

作者: 易含 | 来源:发表于2022-01-13 20:02 被阅读0次
    //  服务页item
    Widget _buildGridService() {
      return Scaffold(
          appBar: AppBar(
            elevation: 8.0, //阴影的高度
            title: Text('便民服务'),
            backgroundColor: MyColors.color_red,
            centerTitle: true, //标题是否居中,默认为false
          ),
          body: Center(
              child: GridView.extent(
            //禁止滚动
            physics: new NeverScrollableScrollPhysics(),
            //横轴的最大长度
            maxCrossAxisExtent: 150.0,
            padding: const EdgeInsets.all(5.0),
            //主轴间隔 纵轴
            mainAxisSpacing: 1.0,
            //横轴间隔 次轴
            crossAxisSpacing: 4.0,
            semanticChildCount: 3,
            children: _buildGridTileList(serviceList),
          )));
    }
    
    List<Container> _buildGridTileList(List<MyService> list) {
      return new List.generate(
          list.length,
          (int index) => new Container(
                child: new GestureDetector(
                  onTap: () {
                    print("---点击了:" + serviceList[index].text);
                    Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new ServiceWebPage(
                                from: serviceList[index].text)));
                  },
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Image.asset(
                        list[index].iconImage,
                        width: 50.0,
                        height: 50.0,
                        fit: BoxFit.fill,
                      ),
                      new Container(
                        padding: EdgeInsets.only(top: 5.0),
                        child: new Text(
                          list[index].text,
                          style: new TextStyle(
                            fontSize: 14.0,
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ));
    }
    

    相关文章

      网友评论

          本文标题:flutter-样式

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