8.flutter之GridView和自定义控件，以及Row,Expanded

GridView其实这个跟安卓原生里的listView的进阶版RecyclerView很像，什么瀑布流，网格流都基本靠这个来实现的GridView的写法和listView的写法大同小异这边先初始化20条item看看效果import 'package:flutter/material.dart';import 'package:flutter_app/ClipOval.dart';void main

百度pkq

455人浏览 · 2021-04-08 17:58:56

百度pkq · 2021-04-08 17:58:56 发布

GridView

其实这个跟安卓原生里的listView的进阶版RecyclerView很像，什么瀑布流，网格流都基本靠这个来实现的

GridView的写法和listView的写法大同小异

这边先初始化20条item看看效果

import 'package:flutter/material.dart';
import 'package:flutter_app/ClipOval.dart';

void main()=>runApp(MyApp());


class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: Layout(),
      ),
    );
  }

}

class Layout extends StatelessWidget{
  List<Widget> _getData(){
    List<Widget>list=new List();
    for(var i=0;i<20;i++){
      list.add(Container(
        alignment: Alignment.center,
        child: Text(
          "这是第$i条数据",
          style: TextStyle(color: Colors.white,fontSize: 20),
        ),
        color: Colors.blue,
      ));
    }
    return list;
  }
  @override
  Widget build(BuildContext context) {
    return GridView.count(//创建的方法，根据数量来创建
      crossAxisSpacing: 20.0,//水平元素的距离
      mainAxisSpacing: 20.0,//垂直元素的距离
      childAspectRatio: 0.6,//宽度和高度的比例
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,
      children: this._getData(),

    );
  }

}

可以看到这个效果就跟网格流布局一样，

然后就是导入那个res里面的资源

import 'res/listDataAuto.dart';
import 'package:flutter/material.dart';
import 'res/listDataAuto.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: Layout(),
      ),
    );
  }
}

class Layout extends StatelessWidget {
  List<Widget> _getListData() {
    var templist = list.map((value) {
      return Container(
        child: Column(
          children: <Widget>[
            Image.network(value['imageUrl']),
            SizedBox(height: 10,),
            Text(
              value['title'],
              textAlign: TextAlign.center,
            ),
          ],
        ),
        decoration: BoxDecoration(
            border: Border.all(
                color: Color.fromRGBO(222, 222, 222, 0.9), width: 1)),
      );
    });
    return templist.toList();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisSpacing: 20.0,
      //水平元素的距离
      mainAxisSpacing: 20.0,
      //垂直元素的距离
      childAspectRatio: 0.7,
      //宽度和高度的比例
      padding: EdgeInsets.all(10),
      crossAxisCount: 2,
      children: this._getListData(),
    );
  }
}

这就可以实现，因为当时我的图片都手机壁纸那种尺寸，所以当时一直警告，我调节的时候就重新换了下图片

padding

接入一个Padding的实例，让GridView的控件实现所有边距相等

这边调用的图片资源是我自己代码里的images的图片

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      child: GridView.count(
        crossAxisCount: 2,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img1.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img2哈哈.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img3.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img4.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img5.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img6.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img7.jpg",
              fit: BoxFit.cover,
            ),
          ),
          Padding(
            padding: EdgeInsets.all(10),
            child: Image.asset(
              "images/img8.jpg",
              fit: BoxFit.cover,
            ),
          ),
        ],
      ),
    );
  }
}

这样看着应该还算舒服吧。

自定义控件

定义一个传入图标，颜色数据，得到如下效果

然后就可以自定义出自己图片，自己尺寸，自己背景颜色的图标按钮了

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'res/listDataAuto.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: Layout(),
      ),
    );
  }
}

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconContainer(Icons.add,size:40.0);
  }
}

class IconContainer extends StatelessWidget {
  double size=32;
  Color color=Colors.blue;
  IconData icon;

  IconContainer(this.icon, {this.size, this.color}) {}

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      height: 100,
      width: 100,
      color: this.color,
      child: Icon(
        this.icon,
        size: this.size,
        color:Colors.white,
      ),
    );
  }
}

调用的方式其实就是先导入包，然后就直接使用这个类的方法就好了

Row、Column

紧接着的是Row组件，这就跟原生的LinearLayout一样，这个是水平的，但是没有线性布局里的权重，权重独立出来了，Expanded这个就是原生里面的权重


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/DIYIcon.dart';
import 'res/listDataAuto.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: Layout(),
      ),
    );
  }
}

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 800.0,
      color: Colors.deepOrangeAccent,
      child: Row(
        //所有距离均匀分配，主轴的，这里是横向的
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        //用的比较少，这是次轴纵向的
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          IconContainer(Icons.add,color: Colors.redAccent,size: 40.0,),
          IconContainer(Icons.hail,color: Colors.blue,size: 40.0,),
          IconContainer(Icons.search_off_sharp,color: Colors.deepPurple,size: 40.0,),
        ],
      ),
    );
  }
  //column用法一样
}

直接省略column的写法了，毕竟和row的都一样。

Expanded

直接学习Expanded这个权重了

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/DIYIcon.dart';
import 'res/listDataAuto.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: Layout(),
      ),
    );
  }
}

class Layout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Row(
        children: [
          //权重。原生的weight
          Expanded(
              flex: 1,
              child: IconContainer(
                Icons.add,
                color: Colors.redAccent,
                size: 40.0,
              )),
          Expanded(
              flex: 2,
              child: IconContainer(
                Icons.hail,
                color: Colors.blue,
                size: 40.0,
              )),
          IconContainer(
            Icons.image_aspect_ratio_outlined,
            color: Colors.lightBlueAccent,
            size: 40.0,
          ),
        ],
      ),
    );
  }

//这就能使用了，
}

可以看到我们就实现了权重的效果了

nContainer(
Icons.hail,
color: Colors.blue,
size: 40.0,
)),
IconContainer(
Icons.image_aspect_ratio_outlined,
color: Colors.lightBlueAccent,
size: 40.0,
),
],
),
);
}

//这就能使用了，
}


[外链图片转存中...(img-5H79ShQb-1617875909841)]

 

 

**可以看到我们就实现了权重的效果了**

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

华为云开发者联盟

FT-FMEA融合混沌演练，零售运营系统韧性架构在线验证实践

华为云开发者联盟

如何使用Python和Plotly绘制3D图形

华为云开发者联盟

所有评论(0)

查看更多评论

百度pkq

@wangaolong0427

已为社区贡献1条内容