Flutter学习笔记 —— 完成一个简单的新闻展示页

上图

前言

刚学Flutter不久，今天我们来看看如何使用 Container & ListView实现一个简单的新闻展示页

思路分析

主要使用：Scaffold 实现页面
组件列表 (我习惯叫组件)

1. StatelessWidget(主界面)
2. StateFulWidget(新闻内容)
3. 两个State(用于展示给基类数据、主界面数据)
4. Entity(实体类)

看起来需要很多，但是实际上实现起来非常简单

案例代码

StatelessWidget.dart

void main() => runApp(TestApp());

class TestApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My App",
      debugShowCheckedModeBanner: false,
      home: new SimpleWidget(AppState()),
    );
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13

Entity -> Recommand

/**
 *  新闻推荐内容
 */
class Recommand{
   final String _image;
   final String _context;

   Recommand(this._image,this._context);

   get getImage => _image;

   get getContext => _context;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Entity -> Content

import 'Recommend.dart';
import 'package:flutter/material.dart';
class Content{
  List<Recommand> recommandList = [];
  Content.load(){
    _defaultRecommandList();
  }

  void _defaultRecommandList(){
    recommandList.add(new Recommand("http://contentcms-bj.cdn.bcebos.com/cmspic/c86c3bdba9c2cb410b37365f0ba62a05.jpeg?x-bce-process=image/crop,x_0,y_0,w_1987,h_1082", "这是新闻内容。。"));
    recommandList.add(new Recommand("http://contentcms-bj.cdn.bcebos.com/cmspic/a5ad81b7fc2df3c172bf515a139492d2.jpeg?x-bce-process=image/crop,x_0,y_0,w_1627,h_885", "这是新闻内容。。"));
    recommandList.add(new Recommand("http://contentcms-bj.cdn.bcebos.com/cmspic/af9f3160d4513171ff7dd3c4a791b931.jpeg?x-bce-process=image/crop,x_0,y_0,w_2104,h_1144", "这是新闻内容。。"));
    recommandList.add(new Recommand("http://contentcms-bj.cdn.bcebos.com/cmspic/fa645ad8b521ed00391c1889cf0fc2a2.jpeg?x-bce-process=image/crop,x_0,y_0,w_1627,h_887", "这是新闻内容。。"));
    recommandList.add(new Recommand("http://contentcms-bj.cdn.bcebos.com/cmspic/187da77d7d0b07906285f7c961d6dd74.jpeg?x-bce-process=image/crop,x_0,y_0,w_2023,h_1101", "这是新闻内容。。"));
  }

  List<Widget> getContentWidgetList(){
    List<Widget> titleList = [];
    for(var i = 0;i<this.recommandList.length;i++){
      var data = this.recommandList[i];
      titleList.add(ListTile(
        contentPadding: EdgeInsets.fromLTRB(0,0,0, 50),
        leading: Image.network(data.getImage,fit: BoxFit.cover,alignment: AlignmentDirectional.topStart,width: 50,height: 50),
        title: new Text(data.getContext,style: TextStyle(color: Colors.red,fontWeight: FontWeight.bold,fontSize: 15)),
      ));
    }
    return titleList;
  }


}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

SimpleWidget

import "package:flutter/material.dart";
import "package:fluttermytest/components/State.dart";
class SimpleWidget extends StatefulWidget{

  State<SimpleWidget> _state;
  SimpleWidget(this._state);

  @override
  State<StatefulWidget> createState() {
    return this._state;
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13

定义初始基类用于展示内容

class NewsBasicWidget extends StatelessWidget{



  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Marinda My App",
      color: Colors.blue,
      home: Container(
        height: 300,
        width: 300,
        child: new SimpleWidget(NewsState())
      )
    );
  }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

定义主要实现State

import "package:flutter/material.dart";
import 'package:fluttermytest/components/Widget.dart';
import 'package:fluttermytest/components/Basic.dart';
import 'package:fluttermytest/entity/Content.dart';
import 'package:fluttermytest/entity/Recommend.dart';

/**
 * AppState 主要实现State
 */
class AppState extends State<SimpleWidget>{

  //初始化页面
  List<Widget> pageWidgetList = [
    NewsBasicWidget(),
    NewsBasicWidget(),
    NewsBasicWidget(),
  ];

  int index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: new Text("My Marinda App"),
      ),
      body: pageWidgetList[index],
      bottomNavigationBar: BottomNavigationBar(items: [
        new BottomNavigationBarItem(icon: Icon(Icons.add_alert),label: "最新咨询"),
        new BottomNavigationBarItem(icon: Icon(Icons.settings),label: "设置"),
        new BottomNavigationBarItem(icon: Icon(Icons.account_box),label: "我的"),
      ],onTap: (flag){
        index = flag;
        print(index);
        setState(() {

        });
      },currentIndex: index,),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      floatingActionButton: FloatingActionButton(
          onPressed: (){
          print("被点击！");
      },
          hoverColor: Colors.blue,
          focusColor: Colors.red,
          backgroundColor: Colors.orange,
        child: new Text("新增"),
      ),
      persistentFooterAlignment: AlignmentDirectional.bottomEnd,
      persistentFooterButtons: <Widget>[
        new Text("内容！")
      ],
      //左滑
      drawer: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: TextButton.icon(onPressed: ()=>print("新增！"), icon: Icon(Icons.add), label: Text("新增",style: TextStyle(color: Colors.white))),
      ),
      endDrawer: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: TextButton.icon(onPressed: ()=>print("删除！"), icon: Icon(Icons.add), label: Text("删除",style: TextStyle(color: Colors.white))),
      ),
    );
  }
}

/**
 *  新闻state 给基类用于展示
 */
class NewsState extends State<SimpleWidget>{
  @override
  Widget build(BuildContext context) {
    Content content = Content.load();
    // int len = content.recommandList.length;
    return ListView(
      padding: new EdgeInsets.all(30),
      // scrollDirection: Axis.vertical,
      children: content.getContentWidgetList(),
    );
  }

}

//主界面展示
class ScaffoldTest extends State<SimpleWidget>{
  int _index = 0;

  List<Widget> pageWidgetList = [

    SimpleBasicWidget("正文一"),
    SimpleBasicWidget("正文二"),
    SimpleBasicWidget("正文三"),
  ];
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("内容信息"),
      ),
      body: pageWidgetList[_index],
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print("点击！");
        },
        child: Text("++"),
        tooltip: "点击了tooltip",
        backgroundColor: Colors.red,
        focusColor: Colors.green,
        splashColor: Colors.deepOrange,
        elevation: 0.0,
        highlightElevation: 20.0,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      persistentFooterButtons: <Widget>[
        Text("标签页")
      ],
      drawer: Container(
        alignment: Alignment.topLeft,
        color: Colors.blue,
        width: 120,
        height: 50,
        child: new TextButton(onPressed: (){
          Navigator.of(context).pop();
        }, child: new Text("点我",style: TextStyle(color: Colors.red),)),
      ),
      endDrawer: Container(
        alignment: Alignment.center,
        color: Colors.yellow,
        width: 120,
        height: 50,
        child: new TextButton(onPressed: (){
          Navigator.of(context).pop();
        }, child: new Text("右滑菜单")),
      ),
      bottomNavigationBar: new BottomNavigationBar(items: [
        BottomNavigationBarItem(icon: Icon(Icons.home,color: _index==0 ? Colors.red : Colors.black),label: "主页"),
        BottomNavigationBarItem(icon: Icon(Icons.home,color: _index==1 ? Colors.red : Colors.black),label: "副页"),
        BottomNavigationBarItem(icon: Icon(Icons.home,color: _index==2 ? Colors.red : Colors.black),label: "收藏"),
      ],
        onTap: (flag){
        print(flag);
        _index = flag;
        setState(() {

        });
        },currentIndex: _index,
      ),
    );
  }

}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156

结束语

Flutter学习笔记 —— 完成一个简单的新闻展示页

• 如果对你有帮助的话可以给我点赞收藏，十分感谢
• 致力做优、好、细、精学习笔记分享给大家
• 可以转载 需标明 出处 本文链接。

感谢你的观看。