flutter

Question

我正在尝试创建一个从屏幕左侧的 ListTiles 列开始的主从类型容器。当用户点击一个项目时，预设 URL 将显示在屏幕的其余部分。点击不同的项目会显示不同的预设 URL。

我看过 Flutter WebView Plugin and and webview_flutter 包，但要么我对它们的理解不够深入（很有可能！），要么它们还不能做我想让它们做的所有事情。

除了我刚才提到的，如果可能的话，我还希望打开的网页可以缩放以适应 space 它们所在的尺寸，但仍然可以缩小到其他尺寸。

p.s。我是 Flutter 的新手，也对小部件构造和内存管理感到困惑。如果我尝试使用 WebView 小部件之类的东西，我不知道我是否每次想打开一个页面时只编写一个 WebView 小部件，或者如果我以某种方式创建一个 WebView 小部件，添加一个 controller，以及代码 .loadFromUrl() 方法。

Answer 1

您可以创建一个包含两个 children 的行。首先 children 将是由 ListTiles 组成的 ListView。第二个 children 将是 WebView。当用户点击列表磁贴时，使用控制器加载 url。您的情况不需要每次都重建 WebView

使用 webview_flutter 的示例：

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  WebViewController _controller;

  List pages = ["https://google.com", "https://apple.com"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
      children: <Widget>[
        Container(
          width: 300,
          child: ListView.builder(
            itemCount: pages.length,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Text(pages[index]),
                onTap: () {
                  if (_controller != null) {
                    _controller.loadUrl(pages[index]);
                  }
                },
              );
            },
          ),
        ),
        Expanded(
          child: WebView(
            onWebViewCreated: (WebViewController c) {
              _controller = c;
            },
            initialUrl: 'https://whosebug.com',
          ),
        ),
      ],
    ));
  }
}

flutter - 在容器中查看网页

flutter - View a web page inside a container

android-webview

dart