如何在颤动中添加文本和轮播图像？

Question

我尝试在文本中添加轮播。但目前我只能添加图像轮播，不知道如何添加文本。请帮我。全新。 我希望输出类似于上面的图像和下面的文本，但两者都需要同时滑动。

我不知道在哪里添加文本字段。我用 youtube 中的一个例子制作了这个轮播。但是没有文本的轮播图像的例子。我手动尝试了一些东西，但这一切都没有很好地结束。 请帮我修复它。谢谢你

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  PageController pageController;

  //Images List
  List<String> images = [
    '',
  ];

  @override
  void initState() {
    super.initState();
    pageController = PageController(initialPage: 1, viewportFraction: 0.6);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: PageView.builder(
            controller: pageController,
            itemCount: images.length,
            itemBuilder: (context, position) {
              return imageSlider(position);
            }
        )
    );
  }

  imageSlider(int index) {
    return AnimatedBuilder(
        animation: pageController,
        builder: (context, widget) {
          double value = 1;
          if(pageController.position.haveDimensions){
            value = pageController.page - index;
            value = (1 - (value.abs() * 0.3.clamp(0.0, 1.0)));
          }
          return Center(
            child: SizedBox(
              height: Curves.easeInOut.transform(value) * 400.0,
              width: Curves.easeInOut.transform(value) * 350.0,
              child: widget,
            ),
          );
        },
      child: Container(
        margin: EdgeInsets.all(10.0),
        child: Image.asset(images[index],fit: BoxFit.cover),
      ),
    );
  }
}

Answer 1

使用列而不是容器，所以只需替换这个：

child: Container(
    margin: EdgeInsets.all(10.0),
    child: Image.asset(images[index],fit: BoxFit.cover),
),

用这个：

child: Column(
    // To centralize the children.
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
        // First child
        Container(
          margin: EdgeInsets.all(10.0),
          child: Image.asset(images[index],fit: BoxFit.cover),
        ),
        // Second child
        Text(
          'foo',
          style: TextStyle(
             // Add text's style here
          ),
        ),
    ]
),

或者，您可以使用现成的，而不是构建自己的轮播，例如：carousel_slider 或 flutter_swiper

Answer 2

试试这个

child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text(
        heading,
        style: TextStyle(
          color: Colors.white,
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(10.0),
        child: Text(
          sub_heading,
          style: TextStyle(
            color: Colors.white,
            fontSize: 15.0,
          ),
          //textAlign: TextAlign.center,
        ),
      ),
    ],
  ),

Answer 3

具有下一个和上一个功能的 PageView

第 1 步：- 添加 PageView 小部件

class _WalkThroughState extends State<WalkThrough> {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  var height = 0.0;
  var width = 0.0;
  int mCurrentIndex = -1;
  List<Widget> pages=[PageOne(message: "Beauty Trends",),PageTwo(message: "Exclusive Offers",),PageThree(message: "Make your Kit",)];
  PageController _controller = new PageController();
  static const _kDuration = const Duration(milliseconds: 300);
  static const _kCurve = Curves.ease;

  @override
  void initState() {
    super.initState();
    _controller = PageController();
  }

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

  @override
  Widget build(BuildContext context) {
    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width;
    return Scaffold(
      extendBodyBehindAppBar: true,
      body: Stack(
        children: [
          Container(
            height: height,
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [startColorBackground, endColorBackground])),
          ),
          Column(
            children: <Widget>[
              Flexible(
                child: Container(
                    child: PageIndicatorContainer(
                      key: _scaffoldKey,
                      child: PageView.builder(
                        controller: _controller,
                        onPageChanged: _onPageViewChange,
                        itemBuilder: (context, position) {
                          mCurrentIndex = position;
                          return pages[position];
                        },
                        itemCount: 3,
                      ),
                      align: IndicatorAlign.bottom,
                      length: 3,
                      indicatorSpace: 10.0,
                      indicatorColor: Colors.white,
                      indicatorSelectorColor: Colors.black,
                    )),
              ),
              Container(
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    // ignore: invalid_use_of_protected_member
                    mCurrentIndex != 0 ?Padding(
                      padding: const EdgeInsets.only(left: 30.0, bottom: 30.0),
                      child: GestureDetector(
                          onTap: () {
                            _controller.previousPage(
                                duration: _kDuration, curve: _kCurve);
                          },
                          child: Text('Prev', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),)),
                    ) : Container(),
                    mCurrentIndex != 2 ? Padding(
                      padding: const EdgeInsets.only(right: 30.0, bottom: 30.0),
                      child: GestureDetector(
                          onTap: () {
                            _controller.nextPage(
                                duration: _kDuration, curve: _kCurve);
                          },
                          child: Text('Next', style: TextStyle(fontSize: 20, fontWeight: FontWeight.w500),)),
                    ) : Container(),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );

  }
  _onPageViewChange(int page) {
    /*print("Current Page: " + page.toString());
    int previousPage = page;
    if(page != 0) previousPage--;
    else previousPage = 2;
    print("Previous page: $previousPage");*/
    setState(() {
      mCurrentIndex = page;
      print(mCurrentIndex);
    });
  }

}

第 2 步：- 添加包含数据的页面

第 1 页

class PageOne extends StatelessWidget {
  final String message;
  var height = 0.0;
  var width = 0.0;

  PageOne({Key key, @required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width;
    return Container(
      height: height - 50,
      child: Align(alignment: Alignment.center, child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
              margin: EdgeInsets.only(top: 16.0),
              child: Image(image: AssetImage("assets/images/banner_one.png"),)),
          Container(
            margin: EdgeInsets.only(bottom: 16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(message, style: TextStyle(fontSize: 40, fontFamily: 'Playfair', fontWeight: FontWeight.bold),),
                SizedBox(height: 30,),
                Text("Lorem Ipsum is simply dummy text of the \n printing and typesetting industry.", textAlign: TextAlign.center, style: TextStyle(fontSize: 18),),
              ],
            ),
          ),
        ],
      ),),
    );
  }
}

第 2 页

class PageTwo extends StatelessWidget {
  final String message;
  var height = 0.0;
  var width = 0.0;

  PageTwo({Key key, @required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width;
    return Container(
      child: Column(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              width: width,
                child: Image(
                  width: double.infinity,
                  image: AssetImage("assets/images/banner_two.png"),
                  fit: BoxFit.cover,)),
          ),
          Expanded(
            flex: 1,
            child: Container(
              margin: EdgeInsets.only(top: 16),
              child: Column(
                children: [
                  SizedBox(
                    height: 40,
                  ),
                  Text(message, style: TextStyle(fontSize: 40, fontFamily: 'Playfair', fontWeight: FontWeight.bold),),
                  SizedBox(height: 30,),
                  Text("Lorem Ipsum is simply dummy text of the \n printing and typesetting industry.", textAlign: TextAlign.center, style: TextStyle(fontSize: 18),),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

第 3 页

class PageThree extends StatelessWidget {
  final String message;
  var height = 0.0;
  var width = 0.0;

  PageThree({Key key, @required this.message}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width;
    return  Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            flex: 3,
            child: Container(
                width: width,
                child: Image(  width: double.infinity,
                  image: AssetImage("assets/images/banner_three.png"), fit: BoxFit.fill,)),
          ),
          Expanded(
            flex: 1,
            child: Container(
              child: Column(
                children: [
                  Text(message, style: TextStyle(fontSize: 40, fontFamily: 'Playfair', fontWeight: FontWeight.bold),),
                  SizedBox(height: 30,),
                  Text("Lorem Ipsum is simply dummy text of the \n printing and typesetting industry.", textAlign: TextAlign.center, style: TextStyle(fontSize: 18),),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

您可以添加 N 个页面。现在正在添加 3 页数据

Colors.dart

import 'package:flutter/material.dart';

const viewColor = Color(0xFFF5D9CE);
const textPinkColor = Color(0xFFF51678);
const buttonPinkColor = Color(0xFFF5147C);
const pinkColor = Color(0xFFF51479);
const pinkBackground = Color(0xFFF5C3C7);
const startColorBackground = Color(0xFFF5F4F2);
const endColorBackground = Color(0xFFF5EAE6);