flutter container/Image/动态List/网格List

最新推荐文章于 2024-05-03 10:46:49 发布

Mobius_zzz

最新推荐文章于 2024-05-03 10:46:49 发布

阅读量650

点赞数

本文链接：https://blog.csdn.net/Mobius_z/article/details/86525917

版权

本文深入探讨了Flutter中的Container组件，详细介绍了如何使用Image展示图片，并展示了如何创建动态列表和网格布局的List，为移动应用开发提供灵活的布局方案。

摘要由CSDN通过智能技术生成

Image:

import "package:flutter/material.dart";
void main ()=>runApp(myApp());
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:'啦啦啦，fluterApp上线了',
      home:Scaffold(
        appBar:AppBar(
          title:Text('古诗词'),
        ),
        body:Center(
          child: Container(
            child:new Image.network(
              'https://etherscan.io/images/EtherscanLogo-transparent-b-small.png',
               fit:BoxFit.scaleDown,//填充方式，fill:充满容器 contain:图片不变形 fitWidth:横向充满 cover:充满屏幕(被裁切)
               color:Colors.greenAccent,
               colorBlendMode: BlendMode.modulate,//颜色叠加模式
               repeat:ImageRepeat.repeat //重复 repeatX/repeatY

            ),
            width:200.0,
            height:200.0,
            color:Colors.lightBlue,
          ),
        ),
      ),
    );
  }
}

动态列表：

import "package:flutter/material.dart";
void main()=>runApp(myApp(
  items:List<String>.generate(1000, (i)=>"Item $i") //创建myApp时，创建一个List当参数传入 generate：List 里带的生成方法 
));
class myApp extends StatelessWidget{
  final List<String> items;//在myApp里接收传来的List
  myApp({Key key,@required this.items}):super(key:key);//super 实例化子类前先实例化父类
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello Flutter',
      home: Scaffold(
        appBar:new AppBar(title:new Text('LIST VIEW')),
        body:new ListView.builder(//生成动态列表
          itemCount:items.length,//生成条数
          itemBuilder:(context,index){
            return new ListTile(
              title:new Text('${items[index]}')
            );
          }
        )
      ),
    );
  }
}

网格列表

import "package:flutter/material.dart";
void main()=>runApp(myApp());
class myApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'hello Flutter',
      home: Scaffold(
        appBar:new AppBar(title:new Text('LIST VIEW')),
        body:GridView.count(
          crossAxisCount: 3,//每行显示个数
          crossAxisSpacing: 3.0,//网格间的距离(左右)
          mainAxisSpacing: 3.0,//网格间的距离(上下)
          childAspectRatio:0.7 ,//网格宽高比
          children: <Widget>[
            new Image.network('http://img5.mtime.cn/mg/2018/12/04/160519.43555325_170X256X4.jpg',fit:BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mt/2018/10/23/094057.62316637_140X210X4.jpg',fit:BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mg/2018/12/04/160519.43555325_170X256X4.jpg',fit:BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mg/2018/12/04/160519.43555325_170X256X4.jpg',fit:BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mg/2018/12/04/160519.43555325_170X256X4.jpg',fit:BoxFit.cover),
            new Image.network('http://img5.mtime.cn/mg/2018/12/04/160519.43555325_170X256X4.jpg',fit:BoxFit.cover),
          ],
        )
      ),
    );
  }
}