flutter 二：快速起步

最新推荐文章于 2024-08-08 08:57:11 发布

煮酒Shae

最新推荐文章于 2024-08-08 08:57:11 发布

阅读量493

点赞数

分类专栏： flutter

本文链接：https://blog.csdn.net/qq_27597629/article/details/104995367

版权

flutter 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

文章目录

1.屏幕中间显示hello
2.自定义小部件（Widget）
3.文字的样式：TextStyle
4.MaterialApp：使用界面组件与定制界面主题
5.列表：准备数据
6. 列表项目

1.屏幕中间显示hello

清空创建工程时，默认生成的入口程序内容，重新编写代码。
在这里插入图片描述

import 'package:flutter/material.dart'

flutter是基于dart语言的，所以都是.dart结尾的。material是谷歌公司推出的设计规则，里面又一些规定，建议。比如颜色，文字的排版，动画等等。界面上能看到的所有东西基本上都是widget组成的。

void main(List<String> args) {
  
}

Center:居中，child：字空间，TextDirection.ltr，从左到右显示

import 'package:flutter/material.dart';
void main(List<String> args) {
  runApp(
    Center(
      child: Text(
        'hello',
        textDirection:TextDirection.ltr
      ),
    )
  );
}

在这里插入图片描述

2.自定义小部件（Widget）

import 'package:flutter/material.dart';
void main(List<String> args) {
  runApp(App());
}

class App extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
return Center(
      child: Text(
        'hello2',
        textDirection:TextDirection.ltr
      ),
    );
  }
}

自定义类App继承自StatelessWidget
@override 覆盖父类的build函数
返回hello2的Widget
在这里插入图片描述

3.文字的样式：TextStyle

style: TextStyle(
          fontSize:40.0,
          fontWeight:FontWeight.bold,
          color:Colors.yellow,

在这里插入图片描述

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

flutter提供了大量的Material设计风格的组件
post.dart

import 'package:flutter/material.dart';
void main(List<String> args) {
  runApp(App());
}

class App extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
return MaterialApp(
  home:Scaffold(
    appBar:AppBar(
      title:Text('NINGHAO'),
      elevation:30.0//阴影默认4.0
    ),
    body:Hello()
  ),
  theme:ThemeData(
    primarySwatch:Colors.yellow//主题颜色
  )
);
  }
}

class Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'hello2',
        textDirection:TextDirection.ltr,
        style: TextStyle(
          fontSize:40.0,
          fontWeight:FontWeight.bold,
          color:Colors.yellow,
        ),
      ),
    );
  }
}

在这里插入图片描述

5.列表：准备数据

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

  final String title;//final一旦分配了值就不能改变
  final String author;
  final String imageUrl;
}

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://resources.ninghao.org/images/candy-shop.jpg',
  ),
  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://resources.ninghao.org/images/childhood-in-a-picture.jpg',
  ),
  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://resources.ninghao.org/images/contained.jpg',
  ),
  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://resources.ninghao.org/images/dragon.jpg',
  ),
  Post(
    title: 'Free Hugs',
    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://resources.ninghao.org/images/free_hugs.jpg',
  ),
  Post(
    title: 'Gravity Falls',
    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://resources.ninghao.org/images/gravity-falls.png',
  ),
  Post(
    title: 'Icecream Truck',
    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://resources.ninghao.org/images/icecreamtruck.png',
  ),
  Post(
    title: 'keyclack',
    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://resources.ninghao.org/images/keyclack.jpg',
  ),
  Post(
    title: 'Overkill',
    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://resources.ninghao.org/images/overkill.png',
  ),
  Post(
    title: 'Say Hello to Barry',
    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://resources.ninghao.org/images/say-hello-to-barry.jpg',
  ),
  Post(
    title: 'Space Skull',
    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://resources.ninghao.org/images/space-skull.jpg',
  ),
  Post(
    title: 'The Old Fashioned',
    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://resources.ninghao.org/images/the-old-fashioned.png',
  ),
  Post(
    title: 'Tornado',
    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://resources.ninghao.org/images/tornado.jpg',
  ),
  Post(
    title: 'Undo',
    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://resources.ninghao.org/images/undo.jpg',
  ),
  Post(
    title: 'White 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://resources.ninghao.org/images/white-dragon.jpg',
  )
];

main.dart

import 'package:flutter/material.dart';
import 'model/post.dart';
void main(List<String> args) {
  runApp(App());
}

class App extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
return MaterialApp(
  home:Home(),
  theme:ThemeData(
    primarySwatch:Colors.yellow//主题颜色
  )
);
  }
}
class Home extends StatelessWidget{
  //自定义一个函数
  Widget _listItemBuilder(BuildContext context,int index){
    return Text(posts[index].title);
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
    appBar:AppBar(
      title:Text('NINGHAO'),
      elevation:30.0//阴影默认4.0
    ),
    body:ListView.builder(
      itemCount: posts.length,
      itemBuilder: _listItemBuilder,
    )
  );
  }
}

在这里插入图片描述

6. 列表项目

在这里插入图片描述
把要显示的内容放在Container小部件里，可以设置背景颜色，间距等。

//自定义一个函数
  Widget _listItemBuilder(BuildContext context,int index){
    return Container(
      color:Colors.red,
      margin:EdgeInsets.all(80.0),//外边距
      child: Column(//竖着排列的，所以用Column小部件
        children:<Widget>[
        Image.network(posts[index].imageUrl),
        SizedBox(height:16.0),//SizedBox留点空间，height高度
        Text(
          posts[index].title,
          style: Theme.of(context).textTheme.headline6,//设置文字的样式
        ),
        Text(
          posts[index].author,
          style: Theme.of(context).textTheme.subtitle1,
        )
      ]),
      
    );
  }