flutter仿ReadHub+

使用flutter做了一个readhub开源项目
 

预览图:


import 'package:flutter/material.dart';
import 'package:readhub/widgets/Home.dart';
import 'package:readhub/widgets/MyWebView.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.white,
      ),
      home: Home(),
      routes: {
        "/MyWebView": (_) => MyWebView("")
      },

    );
  }
}


import 'package:flutter/material.dart';
import 'tab/TabOne.dart';
import 'tab/TabTwo.dart';
import 'tab/TabThree.dart';
import 'tab/TabFour.dart';
class Home extends  StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _Home();
  }
}
class _Home extends State<Home>{
  final List<String> titles= ["热门话题","科技动态","开发者","区块链"];

  set(BuildContext context){
    Scaffold.of(context).openEndDrawer();
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return DefaultTabController(
        length: titles.length,
        child: Scaffold(
          appBar: AppBar(
            title: Text("ReadHub"),
            elevation: 0,
            bottom: TabBar(
                labelColor:Colors.black,
                labelStyle: TextStyle(fontWeight: FontWeight.w600),
                unselectedLabelColor: Colors.grey,
                unselectedLabelStyle: TextStyle(fontWeight: FontWeight.normal),
                indicatorSize: TabBarIndicatorSize.label,
                indicatorColor: Colors.blueGrey,
                indicatorPadding:EdgeInsets.only(top: 10),
                tabs: List.generate(titles.length, (int index){
                  return  Container(
                    child:Tab(text:titles[index]),
                  );
                })),
          ),
          body: TabBarView(
            children: <Widget>[
              TabOne(),
              TabTwo(),
              TabThree(),
              TabFour()
            ],
          ),
        ));
  }

}

使用的第三方插件:
  dio: ^2.1.0
  flutter_webview_plugin: ^0.3.0+2
  fluttertoast: ^3.0.1
  flutter_easyrefresh: ^1.2.7

传送门

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter 是一种跨平台的移动应用开发框架,它提供了丰富的组件和功能,可以帮助开发者快速构建漂亮、流畅的用户界面。对于可滑动自动滚动折线图,在 Flutter 中可以使用 `ListView` 和 `AnimatedContainer` 组件来实现。 首先,我们可以使用 `ListView` 组件来创建一个可以滑动的容器。使用 `ListView.builder` 构建一个动态列表,将折线图中的数据作为列表项进行展示。在 `ListView` 内部添加一个 `ScrollController`,用来控制列表的滚动。 当需要自动滚动时,我们可以通过动画来实现。使用 `AnimatedContainer` 组件来包裹折线图,通过修改它的宽度来实现滚动效果。可以在需要的时候,通过调用 `setState` 方法,来更新 `AnimatedContainer` 的属性值,从而触发动画效果。 在滚动时,可以监听滚动的位置,根据当前滚动的位置来判断是否需要自动滚动。通过 `ScrollController` 的 `addListener` 方法监听滚动事件,计算滚动的位置,并进行相应的判断,如果需要自动滚动,就通过修改 `AnimatedContainer` 的属性值来触发动画。 同时,可以为 `AnimatedContainer` 设置合适的动画时长和曲线,来使滚动效果更加顺滑。 总结来说,要实现可滑动自动滚动折线图,可以使用 `ListView` 和 `AnimatedContainer` 组件。通过监听滚动事件,根据滚动的位置进行判断,并通过修改 `AnimatedContainer` 的属性值来触发动画效果,从而实现自动滚动的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值