如何在所有幻灯片中将标题、文本和点指示符的位置更改为左下角

Posted 2023-03-12

【中文标题】如何在所有幻灯片中将标题、文本和点指示符的位置更改为左下角

【英文标题】：how to change position of title, text and dot indicator to bottom left in all slides

【发布时间】：2021-08-01 01:11:46

【问题描述】：

我从颤振网站上获得了这个介绍教程，我正在尝试创建一个欢迎屏幕，但我想将标题放在屏幕的左下方，并将其下方的描述再次放在左侧和下方点指示器。 有没有办法添加位置参数或对齐方式？

class IntroScreen extends StatefulWidget 
  @override
  IntroScreenState createState() => IntroScreenState();


class IntroScreenState extends State<IntroScreen> 
  List<Slide> slides = [];

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

    slides.add(
      new Slide(
        title: "Tailored For You",
        maxLineTitle: 2,
        styleTitle: TextStyle(
            color: Colors.white,
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'Montserrat'),
        description:
            "lorem ipsum dolore",
        styleDescription: TextStyle(
            color: Color(0xFF8F8F8F),
            fontSize: 20.0,
            fontStyle: FontStyle.italic,
            fontFamily: 'Montserrat'),
        marginDescription:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        // centerWidget: Text("Replace this with a custom widget",
        //     style: TextStyle(color: Colors.white)),
        backgroundImage:
            "/Users/demis/Desktop/club_rat/club_rat/lib/assets/images/bg1.jpg",
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
        onCenterItemPress: () ,
      ),
    );
    slides.add(
      new Slide(
        title: "CITY",
        styleTitle: TextStyle(
            color: Colors.white,
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'Montserrat'),
        description: "lorem ipsum",
        styleDescription: TextStyle(
            color: Color(0xFF8F8F8F),
            fontSize: 20.0,
            fontStyle: FontStyle.italic,
            fontFamily: 'Montserrat'),
        backgroundImage: "images/city.jpeg",
        directionColorBegin: Alignment.topRight,
        directionColorEnd: Alignment.bottomLeft,
      ),
    );
    slides.add(
      new Slide(
        title: "BEACH",
        styleTitle: TextStyle(
            color: Colors.white,
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
            fontFamily: 'Montserrat'),
        description: "lorem ipsum",
        styleDescription: TextStyle(
            color: Color(0xFF8F8F8F),
            fontSize: 20.0,
            fontStyle: FontStyle.italic,
            fontFamily: 'Montserrat'),
        backgroundImage: "images/beach.jpeg",
        directionColorBegin: Alignment.topCenter,
        directionColorEnd: Alignment.bottomCenter,
        maxLineTextDescription: 3,
      ),
    );
  

  void onDonePress() 
    // Do what you want
    // Navigator.push(
    //   context,
    //   MaterialPageRoute(builder: (context) => HomeScreen()),
    // );
  

  Widget renderNextBtn() 
    return Icon(
      Icons.navigate_next,
      color: Color(0xffF3B4BA),
      size: 35.0,
    );
  

  Widget renderDoneBtn() 
    return Icon(
      Icons.done,
      color: Color(0xffF3B4BA),
    );
  

  Widget renderSkipBtn() 
    return Icon(
      Icons.skip_next,
      color: Color(0xffF3B4BA),
    );
  

  ButtonStyle myButtonStyle() 
    return ButtonStyle(
      shape: MaterialStateProperty.all<OutlinedBorder>(StadiumBorder()),
      backgroundColor: MaterialStateProperty.all<Color>(Color(0x33F3B4BA)),
      overlayColor: MaterialStateProperty.all<Color>(Color(0x33FFA8B0)),
    );
  

  @override
  Widget build(BuildContext context) 
    return new IntroSlider(
      // List slides
      slides: this.slides,

      // Skip button
      renderSkipBtn: this.renderSkipBtn(),
      skipButtonStyle: myButtonStyle(),

      // Next button
      renderNextBtn: this.renderNextBtn(),
      nextButtonStyle: myButtonStyle(),

      // Done button
      renderDoneBtn: this.renderDoneBtn(),
      onDonePress: this.onDonePress,
      doneButtonStyle: myButtonStyle(),

      // Dot indicator
      colorDot: Color(0x33FFA8B0),
      colorActiveDot: Color(0xffFFA8B0),
      sizeDot: 13.0,

      // Show or hide status bar
      hideStatusBar: true,
      backgroundColorAllSlides: Colors.grey,

      // Scrollbar
      verticalScrollbarBehavior: scrollbarBehavior.SHOW_ALWAYS,
    );
  

【参考方案1】：

请用Align 小部件将IntroSlider 包裹在Scaffold 中，然后传递alignment: Alignment.bottomLeft。它将IntroSlider 对齐到屏幕的左下角。

【讨论】：

更改无效。没有任何变化，标题和描述仍然在顶部滑块位置也保持不变

我已经更新了答案，请立即查看。