这里记录我学习Flutter的笔记

图像

圆角图像

方法一

child:  Container(
        width:300,
        height: 300,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(30),
          //圆角方法一
            image: DecorationImage(
            image:NetworkImage("https://www.riceshare.com/wp-content/uploads/2022/07/1657510345-GifCam1.gif"),
            fit: BoxFit.cover,
          ),

方法2

child: ClipOval(
          child: Image.network("https://www.riceshare.com/wp-content/uploads/2022/07/1657510812-%E5%9B%BE%E7%89%87.jpg.webp",
            fit: BoxFit.cover,
          ),

列表

静态

列表属性

scrolDirection Axis 列表垂直或水平
padding EdgeInsetsGeometry 内边距
resolve bool 组件反向排序
children List 列表内容

最简单实例



return ListView(
      children: [
        //用在Listview里面
        ListTile(
          leading: Icon(Icons.settings,
            color: Colors.yellow,
          ), 
          //添加图标
          title: Text("这是今天的好内容！"),
          subtitle: Text("简介1242464565435545675743254576897656345676543546854"),
          trailing: Icon(...),
          //在后面添加图标
        ),
        ListTile(
          title: Text("这是今2天的好内容！"),
          subtitle: Text("简介1242464565435545675743254576897656345676543546854"),
        ),
        ListTile(
          title: Text("这是今3天的好内容！"),
          subtitle: Text("简介1242464565435545675743254576897656345676543546854"),
        ),
        //省略
      ],
      //垂直列表
      scrollDirection: Axis.vertical,
      padding: EdgeInsets.all(12),
    );

动态

实现方法

使用For循环实现

使用For循环方式


class Contains extends StatelessWidget{

//自定义一个方法使用For循环返回List
  List<Widget> _getData(){
    List<Widget> list = [];
    for(var i = 0;i<20;i++){
      list.add(ListTile(
        title: Text('这是第$i个列表！！！'),
      ),);
    }
    return list.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //设置一个ListView
    return ListView(
      children: this._getData(),
    );

  }
}

Map方法

ListData.dart文件


List listDatas=[
  {
    "title": 'Candy Shop',
    "author":"Moanghs",
    "imageUrl":'https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp',
  },
  {
    "title": 'Shop',
    "author":"Dccansssghs",
    "imageUrl":'https://i0.hdslb.com/bfs/archive/1c2e265ebc1a60a40f1444de325c83b7c30061cb.jpg@336w_190h_1c.webp',
  },
  {
    "title": 'ssdShop',
    "author":"adrghs",
    "imageUrl":'https://i0.hdslb.com/bfs/archive/0eedab326cd1230c4f11586399f470825d7954cc.png@336w_190h_1c.webp',
  },
  {
    "title": 'Candy Shop',
    "author":"Moanghs",
    "imageUrl":'https://i0.hdslb.com/bfs/archive/08e9af7deb7ef87448095c2eba544c033232d061.jpg@336w_190h_1c.webp',
  },
  {
    "title": 'Shop',
    "author":"Dccansssghs",
    "imageUrl":'https://i0.hdslb.com/bfs/archive/1c2e265ebc1a60a40f1444de325c83b7c30061cb.jpg@336w_190h_1c.webp',
  },

.........

];


import 'res/listData.dart';


class Contains extends StatelessWidget{

//Map方法
  List<Widget> _getData(){
    var tempList=listDatas.map((value){
      return ListTile(
        leading: Image.network(value["imageUrl"]),
        title:Text(value["title"]),
        subtitle: Text(value['author']),
      );
      });
    return tempList.toList();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: this._getData(),
    );

  }
}

ListView.builder方法


import 'res/listData.dart';

class Contains extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      //列表长度
        itemCount:listDatas.length,
        itemBuilder: (context,index){
          return ListTile(
            //index是索引值 eg 0.1.2.3.4
            title: Text(listDatas[index]['title']),
          );
        }
    );
  }
}

将Builder抽离

class Contains extends StatelessWidget{



  Widget _getListData(context,index){
    return ListTile(
      //index是索引值 eg 0.1.2.3.4
      title: Text(listDatas[index]['title']),
    );

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView.builder(
      //列表长度
        itemCount:listDatas.length,
        //把._getListData赋值给 itemBuilder
        itemBuilder: this._getListData
    );
  }
}

自定义按钮组件

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Iconcont(Icons.add,color: Colors.black,);
  }
}


class Iconcont extends StatelessWidget{
  double size=32.0;
  Color color=Colors.white;
  var icon;
  Iconcont(this.icon,{this.color=Colors.white,this.size=32}){

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

Row布局横向布局

mainAxisAlignment 主轴(x)显示（Center...)
crossAxisAlignment y轴

Column 垂直布局

与row大同小异略...

主轴与Row互换

Expanded 布局（flex布局）

类似于线性布局平均分配内部的内容

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Row(
      children: [
        Expanded(
          child: Iconcont(Icons.add,color: Colors.red,),
          flex: 1,
        ),
      Expanded(child: Iconcont(Icons.home,color: Colors.pink,),flex: 2,),

      ],
    );
  }
}


class Iconcont extends StatelessWidget{
  double size=32.0;
  Color color=Colors.white;
  var icon;
  Iconcont(this.icon,{this.color=Colors.white,this.size=32}){

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