2

如何在其他内容下创建可滚动的 webview?例如

page
  content
  content
  webview

我不能将 aSingleChildScrollViewColumn包含其他元素以及 webview 的 a 一起使用,因为应用程序在遇到滚动高度较长的页面时会崩溃。比较ListView 或 CustomScrollView 中的 Flutter WebView - 在 Android 上崩溃以获取详细信息。

我正在使用webview_flutter: ^1.0.7插件。

我试图让它与NestedScrollView

 NestedScrollView(
        headerSliverBuilder: (context, isInnerBoxScrolled) => [
          SliverToBoxAdapter(
            child: Container(
              height: 500,
              color: Colors.green,
            ),
          )
        ],
        body:
            WebView(
          key: ValueKey(html),
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: 'data:text/html;base64,$contentBase64',
        ),
      );

在上述情况下,webview 会显示一个全屏页面,但不会更多。

这是完整的非工作示例:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NestedScrollView & TextField',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    String contentBase64 = base64Encode(const Utf8Encoder().convert(html));
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, isInnerBoxScrolled) => [
          SliverToBoxAdapter(
            child: Container(
              height: 500,
              color: Colors.green,
            ),
          )
        ],
        body:
            // Builder(
            //   builder: (context) {
            //     //final scrollController = PrimaryScrollController.of(context);
            //     return
            WebView(
          key: ValueKey(html),
          javascriptMode: JavascriptMode.unrestricted,
          initialUrl: 'data:text/html;base64,$contentBase64',
          //gestureRecognizers: null,
          // );
          // },
        ),
      ),
    );
  }

  static const html = '''
<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</p>


<h2>Delhi</h2>
<p>Delhi officially known as the National Capital Territory of Delhi (NCT), is a city and a union territory of India containing New Delhi, 
the capital of India. It is bordered by the state of Haryana on three sides and by Uttar Pradesh to the east. 
The NCT covers an area of 1,484 square kilometres (573 sq mi). According to the 2011 census, 
Delhi's city proper population was over 11 million, the second-highest in India after Mumbai, while the whole NCT's population was 
about 16.8 million.</p>

<h2>Shanghai</h2>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. It is under the direct 
administration of the State Council of China. The city is located on the southern estuary of the Yangtze, with the Huangpu River
flowing through it. With a population of 24.28 million as of 2019, it is the most populous urban area in China and the second most 
populous city proper in the world. Shanghai is a global center for finance, research, technology, manufacturing, and transportation, 
and the Port of Shanghai is the world's busiest container port.</p>


<h2>Sao Paulo</h2>
<p>Sao Paulo is a municipality in the Southeast Region of Brazil. The metropolis is an alpha global city (as listed by the GaWC) 
and the most populous city in Brazil, the Americas, the Western Hemisphere and the Southern Hemisphere. Additionally, 
São Paulo is the largest Portuguese-speaking city in the world. The municipality is also the world's 4th largest city proper by population. 
The city is the capital of the surrounding state of São Paulo, the most populous and wealthiest state in Brazil. 
It exerts strong international influences in commerce, finance, arts and entertainment. 
The name of the city honors the Apostle, Saint Paul of Tarsus. The city's metropolitan area, the Greater São Paulo, 
ranks as the most populous in Brazil and the 12th most populous on Earth. The process of conurbation between the metropolitan areas
located around the Greater São Paulo (Campinas, Santos, Sorocaba and São José dos Campos) created the São Paulo Macrometropolis,
a megalopolis with more than 30 million inhabitants, one of the most populous urban agglomerations in the world.</p>

<h2>Ciudad de Mexico</h2>
<p>Ciudad de Mexico is the capital and largest city of Mexico and the most-populous city in North America.
Mexico City is one of the most important cultural and financial centres in the world. 
It is located in the Valley of Mexico (Valle de México), a large valley in the high plateaus in the center of Mexico, 
at an altitude of 2,240 meters (7,350 ft). The city has 16 subdivisions, formerly known as boroughs.</p>

<h2>Cairo</h2>
<p>Cairo is the capital of Egypt and the largest city in the Arab world. Its metropolitan area, with a population of over 20 million, 
is the largest in Africa, the Arab world, and the Middle East, and the 6th-largest in the world. Cairo is associated with ancient Egypt, 
as the famous Giza pyramid complex and the ancient city of Memphis are located in its geographical area. 
Located near the Nile Delta, Cairo was founded in 969 AD by the Fatimid dynasty, but the land composing the present-day city 
was the site of ancient national capitals whose remnants remain visible in parts of Old Cairo. 
Cairo has long been a centre of the region's political and cultural life, and is titled "the city of a thousand minarets" 
for its preponderance of Islamic architecture. Cairo is considered a World City with a "Beta +" classification according to GaWC.</p>

</body>
</html>
  ''';
}

4

0 回答 0