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