时间戳

首页 > 解决方案 > flutter - 查看容器内的网页

flutter - flutter - 查看容器内的网页

问题描述

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

我查看了 Flutter WebView 插件和webview_flutter包，但要么我对它们的理解不够好（很有可能！），要么它们还不能做我想让他们做的所有事情。

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

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

标签： flutterdartandroid-webview

解决方案

您可以创建一个有两个孩子的行。第一个孩子将是由 ListTiles 组成的 ListView。第二个孩子将是 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://stackoverflow.com',
          ),
        ),
      ],
    ));
  }
}

推荐阅读