（四）Flutter 快速起步 HelloWord 与ListView

 

 

Flutter 的核心就是组件 也就是Widget 所以记住核心才能开发好app呀

案列 1  在屏幕中间显示hello

import 'package:flutter/material.dart';



void main(){
runApp(
  Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
      ),
  
  )
);
}

案列2 自定义小部件Widget

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(
     'Hello1111',
     textDirection: TextDirection.ltr,
      ),
  
  );
  }
  
}

效果同上。不在贴图

案列3 文字的样式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(
        'Hello1111',
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 40.0,
            fontWeight: FontWeight.bold,
            color: Colors.yellow
        ),
      ),

    );
  }

}

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

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('app Bar'),
 
          elevation: 0.0,
        ),
        body: Hello(),
      ),
      theme: ThemeData(
          primarySwatch: Colors.yellow
      ),
    );
  }

}



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

    );;
  }

}

案列5 列表 准备数据

下面写一个ListView

我们把数据提前准备好

lib下新建 model/post.dart

内容如下

class Post{
  const Post({
    this.title,
    this.author,
    this.imgeUrl,
  });
  final String title;
  final String author;
  final String imgeUrl;
}

final List<Post> posts=[
  Post(
    title:'七叶森',
    author:'Liu An',
    imgeUrl:'https://www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico',
  ),
  Post(
    title:'七叶森',
    author:'Liu An',
    imgeUrl:'https://www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico',
  ),
  Post(
    title:'七叶森',
    author:'Liu An',
    imgeUrl:'https://www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico',
  ),
  Post(
    title:'七叶森',
    author:'Liu An',
    imgeUrl:'https://www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico',
  ),
  Post(
    title:'七叶森',
    author:'Liu An',
    imgeUrl:'https://www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico',
  ),
  Post(
    title:'七叶森',
    author:'Liu An',
    imgeUrl:'https://www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico',
  )

];

main.dart新建一个widget 把home 提取出来

然后写一个简单的listView

列表视图：ListView.builder

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 Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );
  }

}

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('app Bar'),
          // 阴影
          elevation: 0.0,
        ),
        body: ListView.builder(
          itemCount:posts.length,
          itemBuilder: _listItemBuilder,
        ),
      );
  }

}

 

案列 列表项目 继续优化细节

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 Hello extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
    child: Text(
     'Hello1111',
     textDirection: TextDirection.ltr,
     style: TextStyle(
       fontSize: 40.0,
       fontWeight: FontWeight.bold,
       color: Colors.black87
     ),
      ),
  
  );
  }

}

class Home extends StatelessWidget{
  Widget _listItemBuilder(BuildContext context,int index){
    return Container(
      color: Colors.white,
      margin: EdgeInsets.all(8.0),
      child: Column(
        children: <Widget>[
          Image.network(posts[index].imgeUrl),
          SizedBox(height: 16.0), 
          Text(
            posts[index].title,
            style: Theme.of(context).textTheme.title,
          ),
          Text(
            posts[index].author,
            style: Theme.of(context).textTheme.subhead,
          ),
           SizedBox(height: 16.0), 
        ],
      ),
    );
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      backgroundColor: Colors.grey[100],
        appBar: AppBar(
          title: Text('app Bar'),
          // 阴影
          elevation: 0.0,
        ),
        body: ListView.builder(
          itemCount:posts.length,
          itemBuilder: _listItemBuilder,
        ),
      );
  }

}