在可滑动式

时间:2019-01-19 13:22:55

标签: scroll flutter overflow screen-size

如果页面列表中的页面混乱,则该页面应显示数据。当用户滑动记录时,它将显示有关数据的更多详细信息。完美配合可滑动和IconSlide动作。当数据随着屏幕变大时,我的问题开始了。如果我什么都不做,我的右边界将出现溢出(黄色/黑色条纹)。

所以我的想法是拥有SingleChildScrollView。因此,用户向右滑动并显示数据,并且在数据旁边将显示详细信息操作的按钮。

我从下面的源代码中得到了什么。如果数据适合屏幕显示,则可滑动功能有效。该按钮正确显示。当数据超过屏幕大小时,用户可以滑动并显示数据。但是,该按钮不会出现。

有人知道如何解决这个问题吗?

此示例具有相同的行为。在某行上,“详细信息”图标消失了。

将flutter_slidable:“ ^ 0.4.9”添加为pub spec.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()))
          );
      }
    }

0 个答案:

没有答案