介绍滑块颤振图像未出现

Question

我是应用程序开发的新手，我有几个关于 Flutter 的问题，希望有人能帮助我！

首先，我正在尝试在我的代码中编写介绍幻灯片部分。我在网上找到了这段代码（https://flutterawesome.com/simple-and-configurable-app-introduction-slider-for-flutter/），当我尝试使用我自己的图像执行它时，似乎只打印了背景颜色。当我删除背景颜色时，它只是一个白屏。我的 pageImage 部分是否正确？我到处都保存了一个断言文件夹，所以我不确定这是否是问题所在。我在最后包含了我的代码。

感谢您的宝贵时间！

class _MyHomePageState extends State<MyHomePage> {
   List<Slide> slides = new List();

  @override
  void initState() {
    super.initState();

    slides.add(
      new Slide(
        title: "ERASER",
        description: "Allow miles wound place the leave had. To sitting subject no improve studied limited",
        pathImage: "assets/images/1.png",
        backgroundColor: Colors.pink[200],
      ),
    );
    slides.add(
      new Slide(
        title: "PENCIL",
        description: "Ye indulgence unreserved connection alteration appearance",
        pathImage: "assets/images/1.png",
        backgroundColor: Colors.blue[200],
      ),
    );
    slides.add(
      new Slide(
        title: "RULER",
        description:
        "Much evil soon high in hope do view. Out may few northward believing attempted. Yet timed being songs marry one defer men our. Although finished blessing do of",
        pathImage: "assets/images/3.jpg",
      ),
    );
  }

  void onDonePress() {
    // TODO: go to next screen
  }

  void onSkipPress() {
    // TODO: go to next screen
  }


  @override
  Widget build(BuildContext context) {
    return new IntroSlider(
      slides: this.slides,
      onDonePress: this.onDonePress,
      onSkipPress: this.onSkipPress,
    );
  }
}

**解决方案：在 pubspec 页面中编辑资产

编辑：

左侧（橙色部分）是我希望蓝色图像出现的方式：不滚动并填满整个页面。但是，我试图通过编辑宽度和高度来使我的图像（在右侧）填满页面，并且我开始不得不滚动图像下方和上方有粉红色背景的位置（我认为这是因为它必须始终居中图片）。 有什么方法可以让我的图片成为背景，就像左边的图片一样？我知道橙色背景是背景颜色，但希望通过比较两者是有意义的。谢谢！

Answer 1

我创建了新的介绍小部件。这是代码。

import 'package:flutter/material.dart';

class MyIntroView extends StatefulWidget {
  final List<Widget> pages;
  final VoidCallback onIntroCompleted;

  const MyIntroView({
    Key key,
    @required this.pages,
    @required this.onIntroCompleted,
  })  : assert(pages != null),
        assert(onIntroCompleted != null),
        super(key: key);

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

class _MyIntroViewState extends State<MyIntroView> {
  PageController _pageController;
  int _currentPage = 0;

  @override
  void initState() {
    _pageController = PageController(
      initialPage: _currentPage,
    );
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        NotificationListener<ScrollEndNotification>(
          onNotification: (x) {
            setState(() {
              _currentPage = _pageController.page.round();
            });
            return false;
          },
          child: PageView(
            children: widget.pages,
            controller: _pageController,
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: _buildBottomButtons(),
        ),
      ],
    );
  }

  bool get _isFinalPage => _currentPage == widget.pages.length - 1;

  Widget _buildBottomButtons() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Opacity(
            opacity: _isFinalPage ? 0.0 : 1.0,
            child: _buildButton("SKIP", _gotoLastPage),
          ),
          _buildNavIndicator(),
          _isFinalPage
              ? _buildButton("DONE", widget.onIntroCompleted)
              : _buildButton("NEXT", _gotoNextPage),
        ],
      ),
    );
  }

  Widget _buildButton(String title, VoidCallback callback) {
    return FlatButton(
      child: Text(
        title,
        style: TextStyle(color: Colors.white),
      ),
      onPressed: callback,
    );
  }

  void _gotoLastPage() {
    _pageController.animateToPage(
      widget.pages.length - 1,
      duration: const Duration(milliseconds: 600),
      curve: Curves.ease,
    );
  }

  void _gotoNextPage() {
    _pageController.nextPage(
      duration: const Duration(milliseconds: 600),
      curve: Curves.easeInOut,
    );
  }

  Widget _buildNavIndicator() {
    final indicatorList = <Widget>[];
    for (int i = 0; i < widget.pages.length; i++)
      indicatorList.add(_buildIndicator(i == _currentPage));
    return Row(children: indicatorList);
  }

  Widget _buildIndicator(bool isActive) {
    return Padding(
      padding: const EdgeInsets.all(5.0),
      child: DecoratedBox(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: isActive ? Colors.white : Colors.white30,
        ),
        child: SizedBox(width: 8, height: 8),
      ),
    );
  }
}

用法：

import 'package:flutter/material.dart';
import 'package:flutter_app_test3/my_intro_view.dart';

Future<void> main() async {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyIntroView(
      pages: <Widget>[
        Image.asset("assets/images/1.png", fit: BoxFit.cover),
        Image.asset("assets/images/2.png", fit: BoxFit.cover),
        Image.asset("assets/images/3.jpg", fit: BoxFit.cover),
      ],
      onIntroCompleted: () {
        print("Into is Completed");
        //To the navigation stuff here
      },
    );
  }
}

评论区有什么疑问可以问我

Answer 2

只需尝试将您的 Widget 包装到 Scaffold Widget 中并返回

@override
Widget build(BuildContext context) {
return Scaffold(body:IntroSlider(
  slides: this.slides,
  onDonePress: this.onDonePress,
  onSkipPress: this.onSkipPress,
));

}

Answer 3

我遇到了同样的问题，我通过为图像设置 fit:Boxfit.fill 来解决它。