CarouselSlider 新闻页面颤动

时间:2021-04-15 21:23:54

标签: flutter

我正在 Flutter 上做一个报纸网站,但是每当我尝试实现 CarouselSlider 时,根据 carousel_slider 包,它无法访问列表,有没有人知道我如何实现这个 carousel与此代码具有相同的实现?

列表通知:

class ArticlesPosts {
  String title;
  String titleHome;
  String subtitle;
  String pic;
  String author;
  String notice;
  String data;

  ArticlesPosts({
    this.title,
    this.titleHome,
    this.subtitle,
    this.author,
    this.pic,
    this.notice,
    this.data,
  });
}

var allPosts = [
  ArticlesPosts(
    title:
        'XXXXXXX',
    titleHome: 'XXXXXXXXXXXXX',
    subtitle: 'sssssssssssssssssssssssssssssssssssssssssssssss',
    author: 'nome',
    pic: 'assets/1.jpg',
    notice:
        'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    data: 'Published in 14/04/2021',
  ),

];

首页新闻页面:

import 'package:flutter/material.dart';
import 'package:flutter_application_1/views/home/posts.dart';

import 'articlesDetails.dart';

class MainScreen extends StatelessWidget {
  final posts = allPosts;

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Column(children: [
          SizedBox(height: 20),
          Padding(
            padding: EdgeInsets.only(left: 15.0),
            child: Text(
              "RobSIC News",
              style: TextStyle(
                  fontWeight: FontWeight.w800, height: 3.0, fontSize: 26),
            ),
          ),
          SizedBox(height: 30),
          Container(
            height: MediaQuery.of(context).size.height - 200,
            child: GridView.count(
                crossAxisCount: 1,
                crossAxisSpacing: 0.5,
                mainAxisSpacing: 0.5,
                childAspectRatio: 4,
                primary: false,
                children: [
                  ...posts.map((e) {
                    return buildPostsGrid(e, context);
                  }).toList()
                ]),
          ),
        ])
      ],
    );
  }

  buildPostsGrid(ArticlesPosts posts, BuildContext context) {
    return Card(
      elevation: 9,
      child: FlatButton(
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => ArticlesDetail(selectedPosts: posts)));
          },
          child: Padding(
            padding: EdgeInsets.all(5.0),
            child: Stack(children: [
              Container(height: 400, width: 900.0, color: Colors.transparent),
              Positioned(
                  left: 30.0,
                  top: 30.0,
                  child: Container(
                      height: 30.0,
                      width: 40.0,
                      decoration: BoxDecoration(boxShadow: [
                        BoxShadow(
                            blurRadius: 7.0,
                            color: Colors.grey.withOpacity(0.75),
                            offset: Offset(5, 25),
                            spreadRadius: 12.0)
                      ]))),
              Positioned(
                  left: 12.0,
                  top: 15.0,
                  child: Hero(
                      tag: posts.pic,
                      child: Container(
                          height: 190.0,
                          width: 1000,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(7.0),
                              image: DecorationImage(
                                  image: AssetImage(posts.pic),
                                  fit: BoxFit.cover))))),
              Positioned(
                  left: 15.0,
                  top: 145,
                  child: Column(children: [
                    Text(posts.titleHome,
                        style: TextStyle(
                            fontWeight: FontWeight.w600,
                            color: Colors.white70,
                            height: 1.6,
                            fontSize: 24)),
                  ])),
              Positioned(
                  left: 15.0,
                  top: 179,
                  child: Column(children: [
                    Text(posts.subtitle,
                        style: TextStyle(
                            fontWeight: FontWeight.w400,
                            color: Colors.white,
                            height: 1.2,
                            fontSize: 20)),
                  ])),
              Positioned(
                  left: 740.0,
                  top: 210,
                  child: Column(children: [
                    Text(posts.data,
                        style: TextStyle(
                            fontWeight: FontWeight.w400,
                            height: 1.2,
                            fontSize: 14)),
                  ])),
              Positioned(
                  left: 15.0,
                  top: 210,
                  child: Column(children: [
                    Text(posts.author,
                        style: TextStyle(
                            fontWeight: FontWeight.w400,
                            height: 1.2,
                            fontSize: 14)),
                  ])),
            ]),
          )),
    );
  }
}

新闻页面详情

import 'package:flutter/material.dart';
import 'package:flutter_application_1/views/home/posts.dart';

class ArticlesDetail extends StatefulWidget {
  final ArticlesPosts selectedPosts;

  const ArticlesDetail({Key key, this.selectedPosts}) : super(key: key);

  @override
  _ArticlesDetailState createState() => _ArticlesDetailState();
}

class _ArticlesDetailState extends State<ArticlesDetail> {
  final posts = allPosts;

  @override
  Widget build(
    BuildContext context,
  ) {
    return Stack(
      children: [
        Container(
          padding: EdgeInsets.only(
            top: 25,
            bottom: 16,
            left: 16,
            right: 16,
          ),
          margin: EdgeInsets.only(top: 16),
          decoration: BoxDecoration(
              color: Colors.white,
              shape: BoxShape.rectangle,
              borderRadius: BorderRadius.circular(17),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 10,
                  offset: Offset(0, 10),
                )
              ]),
          child: Stack(children: [
            ListView(
              children: [
                SizedBox(height: 10),
                Positioned(
                  child: Container(
                    height: 90,
                    width: 300,
                    child: Text(widget.selectedPosts.title,
                        style: TextStyle(
                            fontSize: 26, fontWeight: FontWeight.w600)),
                  ),
                ),
                SizedBox(height: 10),
                Positioned(
                  child: Container(
                    height: 50,
                    width: 300,
                    child: Text(widget.selectedPosts.subtitle,
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w300)),
                  ),
                ),
                SizedBox(height: 20),
                Positioned(
                  child: Container(
                    height: 50,
                    width: 300,
                    child: Text(
                        '_______________________________________________________________________________________________________________________',
                        style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.w100,
                            color: Colors.black12)),
                  ),
                ),
                SizedBox(height: 20),
                Positioned(
                    child: Container(
                        height: 400,
                        width: 200,
                        decoration: BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage(widget.selectedPosts.pic))))),
                SizedBox(height: 50),
                Positioned(
                  child: Container(
                    height: 150,
                    width: 300,
                    child: Text(widget.selectedPosts.notice,
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.w400)),
                  ),
                ),
                Align(
                    alignment: Alignment.bottomRight,
                    child: FlatButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text('Confirm')))
              ],
            )
          ]),
        )
      ],
    );
  }
}

0 个答案:

没有答案