флаттер SingleChildScrollView внутри Slidable - PullRequest
0 голосов
/ 19 января 2019

Если есть флаттер с представлением списка, в котором должны отображаться данные. Когда пользователь перемещает запись, он должен показать больше деталей о данных. Это прекрасно работает с возможностью скольжения и IconSlide. Моя проблема начинается, когда данные больше, чем на экране. Если я ничего не делаю, я получу переполнение (желтые / черные полосы) на правой границе.

Поэтому я подумал, что у вас есть SingleChildScrollView. Таким образом, пользователь перемещается влево, и данные отображаются, а рядом с данными будет представлена ​​кнопка для действия «Подробности».

Что я получил с исходным кодом ниже. Slidable работает, если данные помещаются на экране. Кнопка отображается правильно. Когда данные превышают размер экрана, пользователь может скользить, и данные отображаются. Однако кнопка не появится.

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

Этот пример имеет такое же поведение. В определенном ряду значки DETAILS исчезли.

добавить flutter_slidable: "^ 0.4.9" в качестве зависимости в спецификации паба. Yaml

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';

    List<int> fakeData = List();

    void main() async {

      for (int i=0 ; i < 100 ; i++)
        fakeData.add(i*5);

      runApp( MaterialApp(
        home: MyHomePage(title: "Example")
      ));
    }

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

      final String title;

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

    class _MyHomePageState extends State<MyHomePage> {

      Widget build(BuildContext context) {

        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.blue,
            title: Text(
              "Example",
              style: TextStyle(color: Colors.white)
            ),
          ),
          body: ListView.builder (
            itemCount:  100,
            itemBuilder: (BuildContext context, int index) =>
                _showCard(index)  // Toon logboek regel
            )
        );
      }

      // De kaart met de vlucht info
      Widget _showCard(int index) {
        return 
          Card(
            elevation: 1.5,
            child: _showDetails(index)
          );
      }

      // Toon de basis informatie 
      Widget _showDetails(index) {
        return
          Slidable(
            delegate: SlidableDrawerDelegate(),        
            direction: Axis.horizontal,
            secondaryActions: <Widget>[
              new IconSlideAction(
                caption: 'Details',
                color: Colors.grey,
                icon: Icons.more_horiz,
                onTap: () => 
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                                      // action to be done
                    ),
                  ),
              ),
            ],
            child: _content(index)
          );
      }

    // hier gaat het om
      Widget _content(int index) {
        return
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: <Widget> [
                SizedBox(
                  width:25, 
                  child: CircleAvatar(
                    radius: 12.0, 
                    backgroundColor: Colors.black,
                    child: Text(
                      (index+1).toString(),
                      style: TextStyle(fontSize: 13.0)
                    )
                  )
                ),
                Padding (padding: EdgeInsets.all(3)), 
                Container(
                  height: 40,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center, 
                    children: <Widget>[
                      _data(index)
                    ]
                  )
                )
              ]
            )
        );  
      }

      Widget _data(int index) {
        return
         Container(
            margin: const EdgeInsets.all(0.0),
            padding: const EdgeInsets.all(0.0),
            decoration: new BoxDecoration(
              border: new Border.all(color: Colors.blueAccent)
            ),
            child: SizedBox(width: 1.0*fakeData[index], height: 25, child: Text(fakeData[index].toString()))
          );
      }
    }
...