flutter-web：打开Web细节部分的最佳方法是什么

Question

我可以将这些内容编写为小部件页面。 但是我希望有更好的方法，因为我认为这是Web中的正常情况。

复制步骤

1. 在窗口小部件中包含带有IconButton()的内容列表。
2. 使用flutter run -d chrome运行后，它将以镶边显示。
3. 我尝试单击列表中的每个按钮以打开详细信息。

预期2种可能的结果：

1. 在列表部分区域中打开详细信息部分。
2. 或者使用新标签打开详细信息，但最好共享菜单和顶部。 我认为https://github.com/flutter/flutter/issues/33126的情况与此不同。

我可以实现打开详细信息页面并结合菜单和顶部，但是我不喜欢这种方式用于网络。

Answer 1

您可以在ExpansionTile小部件中使用ListView小部件，以获取预期的 Result-1 ，如下所示。

此dartpad中有一个在线示例。

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyExpansionTile(),
        ),
      ),
    );
  }
}

class MyExpansionTile extends StatelessWidget {

  // defining the title and descriptions.
  final List<String> titles = ['title-1', 'title-2', 'title-3'];
  final List<String> descriptions = [
    'Description for title-1',
    'Description for title-2',
    'Detailed Description for  title-3'
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemBuilder: (context, index) {

        // handle index out of range.
        if(index >= titles.length)
          return null;

        // build and expansion tile for each title and description.
        return ExpansionTile(

          // comment following to show an arrow in the end of each expansion tile as per material design.
          trailing: Container(width: 0, height:0),          

          leading: Icon(Icons.open_in_browser),          
          title: Text(titles[index]),
          children: <Widget>[
            Text(descriptions[index]),
          ],
        );
      },
    );
  }
}

这将渲染扩展图块，如下所示。扩展图块是可单击的，单击时会展开和折叠。