Question

这是滑块的示例，如何为每张幻灯片添加文本？我尚未找到有关在github中添加文本或其他元素的任何信息，我们将不胜感激任何帮助或想法。

import "package:flutter/material.dart";

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

class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: MyHomePage() /* MyHomePage2() */,
      );
    }
}

class MyHomePage extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: GridView(
          scrollDirection: Axis.vertical,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
          ),
          children: [
            GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: 10,
              itemBuilder: (context, item) {
                return Text("I am a text in a GridView in a GridView.");
              },
            ),
            PageView.builder(
              itemBuilder: (context, item) {
                return GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  itemCount: 10,
                  itemBuilder: (context, item) {
                    return Text("I am text in a GridView in a PageView in a GridView.");
                  },
                );
              },
              itemCount: 2,
            )
          ]
        )
      );
    }
}

class MyHomePage2 extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: ListView(
          scrollDirection: Axis.vertical,
          children: [
            GridView.builder(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
              ),
              itemCount: 10,
              itemBuilder: (context, item) {
                return Text("I am a text in a GridView in a ListView.");
              },
            ),
            PageView.builder(
              itemBuilder: (context, item) {
                return GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                  ),
                  itemCount: 10,
                  itemBuilder: (context, item) {
                    return Text("I am text in a GridView in a PageView in a ListView.");
                  },
                );
              },
              itemCount: 2,
            )
          ]
        )
      );
    }
}

Answer 1

从文档中并查看DEMO示例，您可以使用以下结构为 slides-container 添加文本：

<ul class="slides-container">
  <li>
    <img src="http://flickholdr.com/1000/800" alt="">
    <div class="container">
      <h2>Text for the first slide</h2> <!-- You can use any tag you want here -->
    </div>
  </li>
  <li>
    <img src="http://flickholdr.com/1000/800/space" alt="">
    <div class="container">
      <h2>Text for the second slide</h2> <!-- You can use any tag you want here -->
    </div>
  </li>
  <li>
    <img src="http://flickholdr.com/1000/800/tech" alt="">
    <div class="container">
      <h2>Text for the third slide</h2> <!-- You can use any tag you want here -->
    </div>
  </li>
</ul>

如何使用超级幻灯片向幻灯片添加文本？

1 个答案: