Flutter中WebView下面弹出内容布局

最新推荐文章于 2024-08-21 09:41:43 发布

磐石BedRock

最新推荐文章于 2024-08-21 09:41:43 发布

阅读量834

点赞数

分类专栏： Flutter

本文链接：https://blog.csdn.net/qq_38774121/article/details/103834092

版权

Flutter 专栏收录该内容

50 篇文章 11 订阅

订阅专栏

在这里插入图片描述

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

class TranformWebViewBottom extends StatefulWidget {
  @override
  _TranformWebViewBottomState createState() => _TranformWebViewBottomState();
}

class _TranformWebViewBottomState extends State<TranformWebViewBottom> {
  double _height = 0;
  Color _color = Colors.red;
  @override
  Widget build(BuildContext context) {
    var duration = Duration(seconds: 2);
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView底部弹出动画'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text('弹出'),
        onPressed: (){
          setState(() {
            _height = 200;
            _color = Colors.blue;
          });
        },
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
                child: InAppWebView(
                  initialUrl: "https://item.m.jd.com/ware/view.action?wareId=100003582705&sid=null",
                  initialHeaders: {},
                  initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) {
  
                  },
                  onLoadStart: (InAppWebViewController controller, String url) {
  
                  },
                  onLoadStop: (InAppWebViewController controller, String url) {
  
                  },
                ),
              ),
          ),
          AnimatedContainer(
              duration: duration,
              height: _height,
              width: MediaQuery.of(context).size.width,
              color: _color,
              child: Text(
                  "AnimatedContainer",
                  style: TextStyle(color: Colors.white),
                ),
            ),
        ],
      )
    );
  }
}