Flutter ListWheelScrollView показывает только один элемент в списке (ios), но хорошо отображается в Интернете (дартпад) - PullRequest
0 голосов
/ 24 апреля 2020

Я пытался использовать ListWheelScrollView и получаю довольно странный результат.

Так что это код, который я использую для отображения WheelScroll месяцев.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var monthsOfTheYear = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];
    FixedExtentScrollController fixedExtentScrollController =
        new FixedExtentScrollController();
    return ListWheelScrollView(
      controller: fixedExtentScrollController,
      physics: FixedExtentScrollPhysics(),
      children: monthsOfTheYear.map(
        (month) {
          return LimitedBox(
            maxHeight: 120,
            child: Card(
              child: Row(
                children: <Widget>[
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(0.0),
                      child: Text(
                        month,
                        textAlign: TextAlign.center,
                        style: TextStyle(fontSize: 18.0),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ).toList(),
      itemExtent: 60.0,
    );
  }
}

Я получаю разные результаты на симуляторе iPhone и дартпаде.

iPhone

iOS симулятор

Dartpad

Дартпад

Почему он не ведет себя так, как это должно быть в iPhone Симуляторе?

Кто-нибудь знает проблема, которая вызывает это?

1 Ответ

0 голосов
/ 24 апреля 2020

Проблема с картой (используйте контейнер).

Попробуйте это


import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var monthsOfTheYear = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December",
    ];

    var radius = Radius.circular(10);

    return ListWheelScrollView(
      itemExtent: 60.0,
      children: monthsOfTheYear.map(
        (month) {
          return Container(
            decoration: BoxDecoration(
                color: Colors.white,
                border: Border(
                  bottom: BorderSide(color: Colors.grey, width: 0.1),
                  left: BorderSide(color: Colors.grey, width: 0.1),
                  right: BorderSide(color: Colors.grey, width: 0.1),
                  top: BorderSide(color: Colors.grey, width: 0.1)
                ),
              borderRadius: BorderRadius.only(bottomRight: radius, bottomLeft: radius, topRight: radius),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey[200],
                  spreadRadius: 0,
                  blurRadius: 0
                )
              ]
            ),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(0.0),
                    child: Text(
                      month,
                      textAlign: TextAlign.center,
                      style: TextStyle(fontSize: 18.0),
                    ),
                  ),
                ),
              ],
            ),
          );
        },
      ).toList(),
    );
  }
}

Вывод:

enter image description here

...