【问题标题】:Flutter Listivew hashtags show more issueFlutter Listview 主题标签显示更多问题
【发布时间】:2021-05-19 08:54:06
【问题描述】:

有可能与颤动有关吗? 许多主题标签来自数据库。如果hashtags长度超过3个,那个时候+10more按钮就会出现,而我们点击按钮。它将展开以显示所有主题标签。请检查我的两张图片,你会明白的。

第一张图片 first image

第二张图片

second image

【问题讨论】:

  • 您到底想要什么?我不确定抱歉,请提供一些具体问题的代码。
  • 请说清楚你想问什么?
  • 很多标签来自数据库。如果hashtags长度超过3个,那个时候+10more按钮就会出现,而我们点击按钮。它将展开以显示所有主题标签。请查看我的两张图片,您会有所了解。

标签: flutter flutter-layout


【解决方案1】:

是的,有可能!

这是一个简单的例子:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> _hashtags = ["Flutter", "Dart", "Google"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.grey,
              height: 50,
              child: ListView.builder(
                itemCount: _hashtags.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index) {
                  return Padding(
                    padding: const EdgeInsets.all(3.0),
                    child: Text("#${_hashtags[index]}"),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Interactive example

输出示例:

【讨论】:

  • 看看我的第二张图片。如果我单击显示更多,它将多显示一行.. !!!不要在水平滚动中,它应该是垂直的或容器..!!!
猜你喜欢
  • 1970-01-01
  • 2013-09-30
  • 2014-01-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-12-28
  • 1970-01-01
相关资源
最近更新 更多