如何在单个列表中添加垂直和水平列表答案

【问题标题】：How to add vertical and horizontal list in single list如何在单个列表中添加垂直和水平列表
【发布时间】：2020-10-19 07:42:30
【问题描述】：

我想在单个列表中添加垂直和水平列表但问题是当我想在单个列表中放置水平和垂直列表时我已经给容器高度但是对于垂直列表我想全屏滚动但它不是可能我必须将高度放在垂直列表中也请帮助我。

class mydynamic extends StatefulWidget {
@override
_mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {

 List<String> my_text = [
"Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda"
 ];

 @override
 void dispose() {
 super.dispose();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
    title: Text(
      "Videolist",
      style: TextStyle(color: Colors.white),
    ),
  ),
  body:ListView(

      children: <Widget>[

        _horizantal_list(),
        _vertical_list()
      ],

  ),
);
}



Widget _horizantal_list()
 {

  return Container(

    height:50.0,
    child: ListView.builder(
      
      itemCount: my_text.length,
      scrollDirection: Axis.horizontal,
      itemBuilder:(context,index){
        
          return Card(

            child: Text(my_text[index]),
          );
          

      }),
  );

}

 Widget _vertical_list()
  {

  return Container(
      height: 150,
    child:  ListView.builder(

        itemCount: my_text.length,
        itemBuilder: (context, index){

            return Card(
                
                child:Text(my_text[index]),
            );

        },

    ),
  );
      

}
}

请提供任何解决方案谢谢

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以在下面复制粘贴运行完整代码
第 1 步：body 使用 Column
第 2 步：_vertical_list 使用Expanded

 Widget _vertical_list() {
    return Expanded(
      child: ListView.builder(

工作演示

完整代码

import 'package:flutter/material.dart';

class mydynamic extends StatefulWidget {
  @override
  _mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {
  List<String> my_text = [
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
    "Hello",
    "World",
    "dasdasd",
    "asdasdasd",
    "sadasdasda",
  ];

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Videolist",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Column(
        children: <Widget>[_horizantal_list(), _vertical_list()],
      ),
    );
  }

  Widget _horizantal_list() {
    return Container(
      height: 50.0,
      child: ListView.builder(
          itemCount: my_text.length,
          scrollDirection: Axis.horizontal,
          itemBuilder: (context, index) {
            return Card(
              child: Text(my_text[index]),
            );
          }),
    );
  }

  Widget _vertical_list() {
    return Expanded(
      child: ListView.builder(
        itemCount: my_text.length,
        itemBuilder: (context, index) {
          return Card(
            child: Text(my_text[index]),
          );
        },
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: mydynamic(),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

【讨论】：

谢谢先生，它工作正常，但我想喜欢这个，请看这个video
先生，我想滚动垂直和水平列表也请为此编码谢谢
这不是一个简单的案例。你可以在这里尝试解决方案stackoverflow.com/a/56327933/2179571
先生，我正在为此使用 sliverlist，但问题是当我将水平列表放入 SliverChildListDelegate([Column(children:<widget>[verticallist(), horizontalist() ] ) ]) 时，垂直列表工作正常但水平列表不起作用
好的，先生，我遇到了这个问题，我使用shrinkWrap=true 来解决这个问题并滚动physics: ClampingScrollPhysics(), 谢谢:)

【解决方案2】：

在这里我更新了我的代码

 class mydynamic extends StatefulWidget {
 @override
 _mydynamicState createState() => _mydynamicState();
}

class _mydynamicState extends State<mydynamic> {

List<String> my_text = [
"Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",

  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",
  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",
  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",
  "Hello",
"World",
"dasdasd",
"asdasdasd",
"sadasdasda",

];

@override
void dispose() {
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(
      "Videolist",
      style: TextStyle(color: Colors.white),
    ),
  ),
  body: CustomScrollView(

     slivers: <Widget>[

       SliverList(delegate:SliverChildListDelegate([

          Column(

            children: <Widget>[

               _vertical_list(),
               _horizontal_list(),
                _vertical_list(),
             
            ],
          )

       ]))

     ],

  ),
 
);
 }



Widget _vertical_list()
{
  return Column(

  children: <Widget>[

    ListView.builder(
      scrollDirection: Axis.vertical,
      physics: ClampingScrollPhysics(),
      shrinkWrap: true,
      itemCount: my_text.length,
      itemBuilder: (context,index){

          return Card(child:Text(my_text[index]));


    })
  ],

 );
}

Widget _horizontal_list()
{


  return Container(
  height:50.0,
  child: ListView.builder(
   shrinkWrap: true,
    scrollDirection: Axis.horizontal,
   itemCount: my_text.length,
   itemBuilder:(context,index){
    
    return Card(

      child: Center(child: Container(child: Text(my_text[index]))),
    );

 }),
);
}

}

【讨论】：