flutter 在欢迎屏幕的最后一项中显示按钮

ohtdti5x  于 2023-06-07  发布在  Flutter
关注(0)|答案(1)|浏览(221)

我有个问题我想展示一个欢迎屏幕,用不同的屏幕。当显示最后一个屏幕时,也应该显示按钮。以便用户从欢迎屏幕跳到第二个屏幕。我该怎么做?
在我的代码中,它没有regoncie context,我不知道如何创建if条件。
WelcomeScreen.dart

import 'package:flutter/material.dart';
import '/items.dart';
import '/SecondRoute.dart';

class WelcomeScreen extends StatefulWidget {
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  List<Widget> slides = items
      .map((item) => Container(
      padding: EdgeInsets.symmetric(horizontal: 18.0),
      child: Column(
        children: <Widget>[
          Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Image.asset(
              item['image'],
              fit: BoxFit.fitWidth,
              width: 220.0,
              alignment: Alignment.bottomCenter,
            ),
          ),
          Flexible(
            flex: 1,
            fit: FlexFit.tight,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 30.0),
              child: Column(
                children: <Widget>[
                  Text(item['header'],
                      style: TextStyle(
                          fontSize: 50.0,
                          fontWeight: FontWeight.w300,
                          color: Color(0XFF3F3D56),
                          height: 2.0)),
                  Text(
                    item['description'],
                    style: TextStyle(
                        color: Colors.grey,
                        letterSpacing: 1.2,
                        fontSize: 16.0,
                        height: 1.3),
                    textAlign: TextAlign.center,
                  ),
                  if (true)
                    ElevatedButton(
                      child: const Text('Open route'),
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => const SecondRoute()),
                        );
                      },
                    ),
                ],
              ),
            ),
          )
        ],
      )))
      .toList();

  List<Widget> indicator() => List<Widget>.generate(
      slides.length,
          (index) => Container(
        margin: EdgeInsets.symmetric(horizontal: 3.0),
        height: 10.0,
        width: 10.0,
        decoration: BoxDecoration(
            color: currentPage.round() == index
                ? Color(0XFF256075)
                : Color(0XFF256075).withOpacity(0.2),
            borderRadius: BorderRadius.circular(10.0)),
      ));

  double currentPage = 0.0;
  final _pageViewController = new PageController();

  @override
  void initState() {
    super.initState();
    _pageViewController.addListener(() {
      setState(() {
        currentPage = _pageViewController.page!;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: <Widget>[
            PageView.builder(
              controller: _pageViewController,
              itemCount: slides.length,
              itemBuilder: (BuildContext context, int index) {
                return slides[index];
              },
            ),
            Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  margin: EdgeInsets.only(top: 70.0),
                  padding: EdgeInsets.symmetric(vertical: 40.0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: indicator(),
                  ),
                )
              //  ),
            )
            // )
          ],
        ),
      ),
    );
  }
}

items.dart

List items = [
  {
    "header": "Learn",
    "description":
    "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/2.png"
  },
  {
    "header": "Build",
    "description":
    "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/3.png"
  },
  {
    "header": "Launch",
    "description":
    "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/1.png"
  },
  {
    "header": "Invest",
    "description":
    "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/5.png"
  },
  {
    "header": "Travel",
    "description":
    "Online chat which provides its users maximum functionality to simplify the search",
    "image": "assets/images/4.png",
    "button": "true",
  }
];
zlwx9yxi

zlwx9yxi1#

您只需检查该项是否包含button键并相应地显示按钮

if (item.containsKey('button') && item['button'] == 'true')
                ElevatedButton(
                  child: const Text('Open route'),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => const SecondRoute()),
                    );
                  },
                ),

对于新问题,您将获得The instance member 'context' can't be accessed in an initializer.
将页面视图更改为使用items

PageView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return slide(items[index]);
          },
        ),

然后将初始化的幻灯片列表更新到自定义小部件以访问上下文。
更新以下幻灯片

List<Widget> slides = items
      .map((item) => Container(
      padding: EdgeInsets.symmetric(horizontal: 18.0),

Widget slide(Map<String, dynamic> item) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 18.0),
      child: Column(
        children: <Widget>[

完整代码在dartpad.dev中。

相关问题