0
点赞
收藏
分享

微信扫一扫

(四)Flutter 快速起步 HelloWord 与ListView

老牛走世界 2023-03-17 阅读 35


 

 

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

案列 1  在屏幕中间显示hello

import 'package:flutter/material.dart';



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

)
);
}

(四)Flutter 快速起步 HelloWord 与ListView_App

案列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
),
),

);
}

}

(四)Flutter 快速起步 HelloWord 与ListView_App_02

案列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
),
),

);;
}

}

(四)Flutter 快速起步 HelloWord 与ListView_App_03

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

}

 

(四)Flutter 快速起步 HelloWord 与ListView_App_04

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

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

}

(四)Flutter 快速起步 HelloWord 与ListView_Text_05

 

举报

相关推荐

0 条评论