0

我是 Flutter 的新手，看了 2 个教程，一个是关于创建选项卡式应用程序的，一个是关于 webview 的。不幸的是，我无法让他们一起工作。我收到布局错误。

这是我的代码：

import 'dart:io';

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(
      debugShowCheckedModeBanner: false,
      home: DefaultTabController(
        length: choices.length,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Hydra Sense Control'),
            bottom: TabBar(
              isScrollable: true,
              tabs: choices.map<Widget>((Choice choice) {
                return Tab(
                  text: choice.title,
                  icon: Icon(choice.icon),
                );
              }).toList(),
            ),
          ),
          body: TabBarView(
            children: choices.map((Choice choice) {
              return Padding(
                padding: const EdgeInsets.all(20.0),
                child: ChoicePage(
                  choice: choice,
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

class Choice {
  final String title;
  final IconData icon;
  final String link;
  const Choice({this.title, this.icon, this.link});
}

const List<Choice> choices = <Choice>[
  Choice(
      title: 'DuetWebControl',
      icon: Icons.settings,
      link: 'https://google.com'),
  Choice(title: 'Cameras', icon: Icons.videocam, link: 'https://yahoo.com'),
  Choice(
      title: 'Thingiverse',
      icon: Icons.cloud_download,
      link: 'https://thingiverse.com'),
  Choice(
      title: 'HevORT Forums',
      icon: Icons.description,
      link: 'https://forums.hevort.com'),
  Choice(title: 'About Hydra', icon: Icons.info, link: 'https://youtube.com'),
];

class ChoicePage extends StatelessWidget {
  const ChoicePage({Key key, this.choice}) : super(key: key);
  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.headline4;
    return Card(
      color: Colors.white,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(
              choice.icon,
              size: 150.0,
              color: textStyle.color,
            ),
            Text(
              choice.title,
              style: textStyle,
            ),
            WebView(
                initialUrl: choice.link,
                javascriptMode: JavascriptMode.unrestricted)
          ],
        ),
      ),
    );
  }
}

此外，我想添加功能以刷新页面或像在 ios 中一样来回切换。向左滑动返回，向右滑动向前，向下滑动刷新。

只是一个试图制作一个小应用程序的菜鸟。

4

1 回答 1

0

为了防止该错误，您可以简单地将 WebView 包装在 Expanded 小部件中，如下所示：

Expanded(
              child: WebView(
                  initialUrl: choice.link,
                  javascriptMode: JavascriptMode.unrestricted),
            )
于 2020-09-11T18:42:38.387 回答