Flutter基础（一)快速的认识flutter以及listview列表的简单实现

最新推荐文章于 2024-04-17 07:14:49 发布

ken的学习之路

最新推荐文章于 2024-04-17 07:14:49 发布

阅读量377

点赞数

分类专栏： Flutter学习文章标签： dart 列表

本文链接：https://blog.csdn.net/weixin_38072112/article/details/109035653

版权

Flutter学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前序：flutter 就是将各个模块分解成一个个小部件，整个页面由许多个小部件组合而成。

一、将’hello’输出在屏幕的中间

1.需要用到两个小部件，一个是Center，另一个是Text。Text是包含在Center里的子部件。

import 'package:flutter/material.dart';

void main() {
  runApp(
    Center(
      child: Text(
        'hello',
        //textDirection：text从左到右对齐
        textDirection: TextDirection.ltr,
      ),
    )
  );
}

2.自定义部件App。

import 'package:flutter/material.dart';

void main()  => runApp(App());
 
 //自定义class App 作为自定义小部件。
class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
      ),
    );
  }
}

3.设置字体的Style属性[TextStyle] 。

import 'package:flutter/material.dart';

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

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,//设置字号大小
          fontWeight: FontWeight.bold,//设置文字的粗细：粗体字
          color: Colors.yellow, //设置字体颜色
        ),
      ),
    );
  }
}

4.使用界面组件与定制界面主题

import 'package:flutter/material.dart';

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

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //使用界面组件与定制界面主题
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('顶部栏'),
          elevation: 30.0, //添加阴影的效果
        ),
        body: Hello(),
      ),
      //设置主题风格
      theme: ThemeData(
        primarySwatch: Colors.yellow,//设置主题颜色
      ),
    );
  }
}

class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return  Center(
      child: Text(
        'hello',
        textDirection: TextDirection.ltr,
        style: TextStyle(
          fontSize: 40.0,//设置字号大小
          fontWeight: FontWeight.bold,//设置文字的粗细：粗体字
          color: Colors.yellow, //设置字体颜色
        ),
      ),
    );
  }
}

二.创建model文件，准备数据

1.新建一个文件夹model用来存放数据，之后创建post.dart。

定义一个List列表，列表项用来存放post类型。

class Post {
  Post({
    this.title,
    this.author,
    this.imageUrl,
    this.description,
  });

  final String title;
  final String author;
  final String imageUrl;
  final String description;

  bool selected = false;
}

final List<Post> posts = [
  Post(
    title: 'Candy Shop',
    author: 'Mohamed Chahin',
    description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
    imageUrl: 'https://picsum.photos/id/142/600/400',
  ),
  Post(
    title: 'Childhood in a picture',
    author: 'Mohamed Chahin',
    description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
    imageUrl: 'https://picsum.photos/id/142/600/400',
  ),
  Post(
    title: 'Contained',
    author: 'Mohamed Chahin',
    description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
    imageUrl: 'https://picsum.photos/id/142/600/400',
  ),
  Post(
    title: 'Dragon',
    author: 'Mohamed Chahin',
    description: 'Esse ut nulla velit reprehenderit veniam sint nostrud nulla exercitation ipsum. Officia deserunt aliquip aliquip excepteur eiusmod dolor. Elit amet ipsum labore sint occaecat dolore tempor officia irure voluptate ad. Veniam laboris deserunt aute excepteur sit deserunt dolor esse dolor velit sint nulla anim ut. Reprehenderit voluptate adipisicing culpa magna ea nulla ullamco consectetur. Cupidatat adipisicing consequat adipisicing sit consectetur dolor occaecat.',
    imageUrl: 'https://picsum.photos/id/142/600/400',
  ),
];

2. 列表[Listview]和数据的结合。

重点：

	itemBuilder: _listItemBuilder   //使用自定义方法_listItemBuilder展示列表项目

内部实现：

	 Widget _listItemBuilder(BuildContext context, int index){
		//Container小部件
		return Container(
  			color: Colors.white,//设置背景颜色
  			margin: EdgeInsets.all(8.0),//设置container的外边距
 			 //列表项是垂直结构：依次是图->title->author
  			child: Column(
   				 children: <Widget>[
    				//网络图片
      				Image.network(posts[index].imageUrl),
      				//sizedbox 设置图与text之间的空格边距，相当于用sizedbox填充。
      				SizedBox(height: 16.0),
      				Text(
        				posts[index].title,
        				style: Theme.of(context).textTheme.bodyText1
      				),
      				Text(
          				posts[index].author,
         				style: Theme.of(context).textTheme.subtitle1
      				),
      				SizedBox(height: 16.0),
   			 ],
 		 ),
	);

}

完整版代码：

import 'package:flutter/material.dart';

import 'model/post.dart';

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

class App extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //使用界面组件与定制界面主题
    return MaterialApp(
      home: Home(),
      //设置主题风格
      theme: ThemeData(
        primarySwatch: Colors.yellow,//设置主题颜色
      ),
    );
  }
}

class Home extends StatelessWidget{
/*******************列表内部每一个都是一个Widget*************************/
  Widget _listItemBuilder(BuildContext context, int index){
    //Container小部件
    return Container(
      color: Colors.white,//设置背景颜色
      margin: EdgeInsets.all(8.0),//设置container的外边距
      //列表项是垂直结构：依次是图->title->author
      child: Column(
        children: <Widget>[
        //网络图片
          Image.network(posts[index].imageUrl),
          //sizedbox 设置图与text之间的空格边距，相当于用sizedbox填充。
          SizedBox(height: 16.0),
          Text(
            posts[index].title,
            style: Theme.of(context).textTheme.bodyText1
          ),
          Text(
              posts[index].author,
              style: Theme.of(context).textTheme.subtitle1
          ),
          SizedBox(height: 16.0),
        ],
      ),
    );
  }
/********************************************************************/
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text('顶部栏'),
        elevation: 30.0, //添加阴影的效果
        ),
        //列表视图
        body: ListView.builder(
          itemCount: posts.length, //列表视图的长度
            itemBuilder: _listItemBuilder,//使用自定义方法展示列表项目
        ),
      ),

    );
  }
}

在这里插入图片描述

ken的学习之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flutter基础（一)快速的认识flutter以及listview列表的简单实现

前序：flutter 就是将各个模块分解成一个个小部件，整个页面由许多个小部件组合而成。一、将’hello’输出在屏幕的中间1.需要用到两个小部件，一个是Center，另一个是Text。Text是包含在Center里的子部件。import 'package:flutter/material.dart';void main() { runApp( Center( child: Text( 'hello', //textDirection：tex
复制链接

扫一扫