Flutter 代码拆分
全部代码:
import 'package:flutter/material.dart';
import 'model/post.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
theme: ThemeData(
primaryColor: Colors.orange
),
);
}
}
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].imageUrl),
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) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('Muzico'),
elevation: 0.0,
),
body: ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
),
);
}
}
class Hello extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'hello',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.yellow,
),
),
);
}
}
将 ListView 的内容独立出来成 ListViewDemo:
class ListViewDemo 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].imageUrl),
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) {
return ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
}
然后 项目的 lib 文件夹下创建一个 demo 文件夹,创建ListViewDemo.dart,Hello.dart,将现有的代码对应分到里面:
ListViewDemo.dart:
import 'package:flutter/material.dart';
import '../model/post.dart';
class ListViewDemo 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].imageUrl),
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) {
return ListView.builder(
itemCount: posts.length,
itemBuilder: _listItemBuilder,
);
}
}
Hello.dart:
import 'package:flutter/material.dart';
class Hello extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'hello',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.yellow,
),
),
);
}
}
main.dart:
import 'package:flutter/material.dart';
import 'demo/ListViewDemo.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home(),
theme: ThemeData(
primaryColor: Colors.orange
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
title: Text('Muzico'),
elevation: 0.0,
),
body: ListViewDemo(),
);
}
}