회전목마 진동

회전목마는 제품의 다양한 기능을 한 번에 여러 제품을 광고하거나 장에서 당신의 브랜드 이야기를 들려주는 좋은 방식이다.

회전목마는 무엇입니까?

회전목마는 여러 개의 이미지를 포함하는 압정으로 각 이미지는 각각 관련된 간단한 설명이 있어 상하문을 쉽게 전달하는 데 도움이 된다.
사람들은 그들의 가족 개요에서 회전목마를 다른 핀처럼 보았다.그들은 직접 개요에서 다른 이미지 (또는 카드) 를 훑어볼 수 있다.또는 그들은 회전목마를 클릭하여 모든 카드와 그에 상응하는 사이트에서 카드를 긁을 수 있으며 기본적으로 서로 다른 로그인 페이지에서 카드를 긁을 수 있다.

이런 회전목마를 만들래요.

이것은 사실 우리가 본문이 끝날 때 해야 할 일이다.당신의 에너지를 담아서 시작합시다.

모델 클래스

class TeslaCar {
  TeslaCar({this.model, this.image, this.description});

  String model;
  String image;
  String description;
}

우리는 테슬라 자동차 회전목마를 만들어야 하기 때문에 위와 유사한 모형류를 만들어야 한다

model, 자동차 모형을 묘사했다.

image 자동차의 NetworkImage Url 링크가 있습니다.

description 자동차에 대한 설명을 제공했다.

자동차 배열

var cars = [
  TeslaCar(
      model: 'Roadster',
      image: 'https://wallpaperaccess.com/full/1152734.jpg',
      description:
          'As an all-electric supercar, Roadster maximizes the potential of aerodynamic engineering—with record-setting performance and efficiency.'),
  TeslaCar(
      model: 'Model S',
      image: 'https://wallpapershome.com/images/pages/pic_v/8763.jpeg',
      description:
          "Model S sets an industry standard for performance and safety. Tesla’s all-electric powertrain delivers unparalleled performance in all weather conditions."),
  TeslaCar(
      model: 'Model 3',
      image: 'https://wallpapershome.com/images/pages/ico_v/20707.jpg',
      description:
          "Model 3 comes with the option of dual motor all-wheel drive, 20” Performance Wheels and Brakes and lowered suspension for total control, in all weather conditions."),
  TeslaCar(
      model: 'Model X',
      image:
          'https://images.hdqwalls.com/download/tesla-model-x-front-4k-5x-1080x1920.jpg',
      description:
          "Tesla’s all-electric powertrain delivers Dual Motor All-Wheel Drive, adaptive air suspension and the quickest acceleration of any SUV on the road—from zero to 60 mph in 2.6 seconds."),
  TeslaCar(
      model: 'Model Y',
      image:
          'https://www.autocar.co.uk/sites/autocar.co.uk/files/images/car-reviews/first-drives/legacy/model_y_front_34_blue.jpg',
      description:
          "Tesla All-Wheel Drive has two ultra-responsive, independent electric motors that digitally control torque to the front and rear wheels—for far better handling, traction and stability."),
  TeslaCar(
      model: 'Cyber Truck',
      image: 'https://img.wallpapersafari.com/phone/750/1334/65/24/BAlZne.jpg',
      description:
          "The powerful drivetrain and low center of gravity provides extraordinary traction control and torque—enabling acceleration from 0-60 mph in as little as 2.9 seconds."),
];

회전목마에 사용되는 자동차 진열을 만들기 위해 TeslaCar 클래스를 사용해야 합니다

회전목마카

// ignore: must_be_immutable
class CarouselCard extends StatelessWidget {
  CarouselCard({this.car});

  TeslaCar car;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Padding(
        padding: EdgeInsets.only(
          top: 32.0,
          left: 8.0,
          right: 8.0,
        ),
        child: Container(
          width: MediaQuery.of(context).size.width * 0.7,
          height: MediaQuery.of(context).size.height * 0.5,
          decoration: BoxDecoration(
            // color: Colors.redAccent,
            borderRadius: BorderRadius.circular(16.0),
            boxShadow: [
              BoxShadow(
                  color: kShadowColor, offset: Offset(0, 20), blurRadius: 10.0),
            ],
            image: DecorationImage(
                image: NetworkImage(car.image), fit: BoxFit.cover),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  width: 44,
                  height: 44,
                  child: Image.network(
                    'https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/595px-Tesla_Motors.svg.png',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                  children: <Widget>[
                    Spacer(),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: <Widget>[
                        Text(
                          car.model,
                          style: kCardTitleStyle,
                        ),
                        Container(
                          height: 100,
                          width: MediaQuery.of(context).size.width * 0.6,
                          child: Text(
                            car.description,
                            style: kCardDescriptionTextStyle,
                            textAlign: TextAlign.end,
                            overflow: TextOverflow.ellipsis,
                            maxLines: 5,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

회전 목마 목록을 만들기 전에 회전 목마 카드가 필요합니다. 따라서 아래 절차에 따라 상기 회전 목마 카드를 만드십시오

라는 이름의 무상태 소부품을 작성합니다.

유형이 CarouselCard인 변수car를 성명합니다. 왜냐하면 우리는 TeslaCar 대상을 통해 자동차

의 속성을 얻어야 하기 때문입니다.

높이와 너비 속성을 가진 TeslaCar 을 생성합니다.(사용자 정의 높이와 너비를 사용하여 MediaQuery를 사용합니다Container에 따라 조정됩니다.)

screen size, decoration, borderRadius 및 boxShadow 카드

의 재산

image 속성에서 우리는 자동차child의 Tesla logo, model 명칭과 description

Coursel 목록

class CarouselList extends StatefulWidget {
  @override
  _CarouselListState createState() => _CarouselListState();
}

class _CarouselListState extends State<CarouselList> {
  int currentPage = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: kPrimaryColor,
        title: Text("Carousels"),
        centerTitle: false,
      ),
      body: Column(
        children: <Widget>[
          Spacer(),
          Container(
            height: MediaQuery.of(context).size.height * 0.6,
            width: double.infinity,
            child: PageView.builder(
              itemBuilder: (context, index) {
                return Opacity(
                  opacity: currentPage == index ? 1.0 : 0.8,
                  child: CarouselCard(
                    car: cars[index],
                  ),
                );
              },
              itemCount: cars.length,
              controller:
                  PageController(initialPage: 0, viewportFraction: 0.75),
              onPageChanged: (index) {
                setState(() {
                  currentPage = index;
                });
              },
            ),
          ),
          updateIndicators(),
          Spacer(),
          Column(
            children: <Widget>[
              Text('Flutter UI Component Library',style: kHeadlineLabelStyle,),
              Text('@irangareddy',style: kSubtitleStyle,)
            ],
          ),
          Spacer(),
        ],
      ),
    );
  }
}

우리는 이미 하나 CarouselCard 를 성공적으로 만들었지만, 실제 증인 List 전에 하나 Carousels 를 만들어야 한다

을 생성하고 Stateful Widget로 이름을 지정합니다.(우리가 왜 StatefulWidget으로 만들어졌는지 곧 알게 될 것이다.)

하나CourselList를 만들고 하나Container와 height > CarouselCard height를 제시합니다. 우리는 카드width = double.infinity를 알고 있지만, height 목록에서 얼마나 많은 것을 차지하는지 모르기 때문입니다.

여기는 중요 구역width 속성입니다. Cards

중요 도움말: 페이지 보기 정보 (알고 있으면 건너뛰기)

Achild는 거의 목록과 같지만 한 페이지 한 페이지 일할 수 있다.나는 이것으로 가로 목록을 세운다.

페이지 뷰의 각 하위 뷰는 PageView 크기와 같아야 합니다.

를 사용하여 뷰에서 볼 수 있는 페이지를 제어할 수 있습니다.페이지 보기의 내용을 제어할 수 있는 픽셀 오프셋 외에도 PageView 페이지의 오프셋, 즉 viewport 크기의 증가를 제어할 수 있다.

PageController 및 PageController 제어에도 사용할 수 있습니다. 전자는 처음 페이지 보기를 구축할 때 표시된 페이지를 확정하고 후자는 페이지 크기를 뷰포트 크기의 일부로 확정합니다.

자료 출처: Flutter API Docs
이러한 관점들은 페이지 보기의 뚜렷한 개념을 제시했다.나는 이 줄을 사용하여 문서의 형식에 완전히 부합한다. 왜냐하면 그것들이 가장 좋기 때문이다.
정확히 이해하시기 바랍니다viewport빌드 회전목마로 돌아가기

사용PageController속성, 우리사용PageController.initialPage값

목록으로 되돌아오는 PageController.viewportFraction

에 배열 길이 지정 PageView

itembuilder 관리 cards 뷰를 사용하고 index (시작점) 에 할당 itemCount 기본값은 1입니다. 즉, 각 카드가 전체 뷰를 차지합니다.보기를 조정하려면 변경controller합니다.

변수를 생성하여 페이지 보기의 현재 페이지를 파악하고 PageView 속성

의 값을 업데이트합니다

코드를 똑똑히 관찰하면 실현되지 않은 PageViewController 함수

가 있습니다

지표 추가

  Widget updateIndicators() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: cars.map(
        (car) {
          var index = cars.indexOf(car);
          return Container(
            width: 7.0,
            height: 7.0,
            margin: EdgeInsets.symmetric(horizontal: 6.0),
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color:
                  currentPage == index ? Colors.red : Color(0xFFA6AEBD),
            ),
          );
        },
      ).toList(),
    );
  }

이것은 지시기의 작은 부품으로 사용자가 그들이 어디에 있는지와 카드의 총수를 알 수 있도록 도와준다

결론

회전목마는 매우 빠르고 간단한 방식으로 사용자에게 정보를 전달하고 이미지와 광고로 사용자를 끌어들인다.이 기능을 더욱 확장하여 각 카드를 각자의 보기로 내비게이션하고 상하문에 대한 더 많은 정보를 설명할 수 있습니다.
GitHub Link
응용 프로그램 개발 기술을 향상시키고 싶다면 Flutter와 SwiftUI에서 더욱 그렇다.다른 힌트나 피드백이 있으면 언제든지 dm나 트위터를 보내주세요.
읽어주셔서 감사합니다!