flutter - flutter-web：打开网页细节部分的最佳方式是什么

Question

我可以把这些东西写成小部件的页面。但我希望有更好的方法，因为我认为这是网络的正常情况。

重现步骤

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

预期 2 个可能的结果：

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

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

标签： flutterflutter-web

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]),
          ],
        );
      },
    );
  }
}

这将呈现扩展图块，如下所示。展开图块是可点击的，点击时展开和折叠。