Question

我对应用程序开发非常陌生，我对Flutter有一些疑问，我希望有人可以帮助我！

首先，我尝试在我的代码中编写幻灯片简介部分。我在网上（https://flutterawesome.com/simple-and-configurable-app-introduction-slider-for-flutter/）上找到了此代码，当我尝试使用自己的图像执行该代码时，似乎仅显示背景色。当我删除背景色时，它只是一个白色的屏幕。我的pageImage部分正确吗？我在所有位置都保存了一个assert文件夹，所以不确定是否是问题所在。我已经在代码末尾添加了。

谢谢您的时间！

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来解决了这个问题。

滑块内抖动图像未出现

3 个答案: