当前位置：首页 > news >正文

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

news 来源：原创 2024/7/3 0:53:15

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

前言
思路分析
案例代码
结束语

在这里插入图片描述

上图

前言

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

思路分析

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

StatelessWidget(主界面)
StateFulWidget(新闻内容)
两个State(用于展示给基类数据、主界面数据)
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()),
    );
  }

}

Entity -> Recommand

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

   Recommand(this._image,this._context);

   get getImage => _image;

   get getContext => _context;

}

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


}

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

}

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


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

}

定义主要实现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,
      ),
    );
  }

}