Flutter如何快速入门，实现HelloWord和ListView功能？

本文共计810个文字，预计阅读时间需要4分钟。

Flutter的核心是组件和Widget，只有记住核心才能开发出好的app。案例1：在屏幕中间显示Hellodartimport 'package:flutter/material.dart';

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

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 ), ), ); }}

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

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:'www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico', ), Post( title:'七叶森', author:'Liu An', imgeUrl:'www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico', ), Post( title:'七叶森', author:'Liu An', imgeUrl:'www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico', ), Post( title:'七叶森', author:'Liu An', imgeUrl:'www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico', ), Post( title:'七叶森', author:'Liu An', imgeUrl:'www.qiyesen.com/wp-content/uploads/2020/01/20200107042314837_easyicon_net_96.ico', ), Post( title:'七叶森', author:'Liu An', imgeUrl:'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, ), ); }}