0

我想在 Flutter 中创建以下类型的轮播视图

在此处输入图像描述

到目前为止我尝试过的

  • 我已经有了这个carousel_slider 1.4.1包:flutter 包无法根据我的要求创建轮播视图
  • 我已经尝试使用源代码并尝试根据我的要求进行修改但没有得到正确的解决方案这里是修改后代码的输出

在此处输入图像描述

我的代码

Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/images/home.png'),
                  fit: BoxFit.cover,
                ),
                shape: BoxShape.rectangle,
              ),
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              padding: EdgeInsets.symmetric(horizontal: 30.0, vertical: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    width: 50.0,
                    height: 53.0,
                    child: Center(
                      child: Text(
                        "N",
                        style: TextStyle(
                            color: AppColors.textColor, fontSize: 20.0),
                      ),
                    ),
                    padding:
                        EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                    decoration: BoxDecoration(
                        border:
                            Border.all(color: AppColors.textColor, width: 2)),
                  ),
                  SizedBox(
                    height: 68,
                  ),
                  Text(
                    "Hi",
                    style: TextStyle(fontFamily: 'f_book', fontSize: 16),
                  ),
                  Text(
                    userName,
                    style: TextStyle(
                        fontFamily: 'f_bold',
                        fontSize: 28,
                        fontWeight: FontWeight.bold),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 40),
                    child: CarouselSlider(
                      items: child,
                      autoPlay: false,
                      height: 400,
                      enableInfiniteScroll: true,
                      initialPage: 0,
                      enlargeCenterPage: true,
                      aspectRatio: 2.0,
                      onPageChanged: (index) {
                        setState(() {
                          _current = index;
                        });
                      },
                    ),
                  ),
                  Container(
                      margin: EdgeInsets.only(top: 40),
                      child: Center(child: Text(Constants.howDoesItWork)))
                ],
              ),
            )

如果需要更多信息,请告诉我。提前致谢。您的努力将不胜感激。

4

0 回答 0