为什么设置高度对容器不起作用?

时间:2019-10-29 10:01:00

标签: flutter dart

我刚刚开始学习flutter,并在练习中使用了flutter_swiper软件包。当我将元素传递到滑动器时,我发现高度设置不适用于容器。

我尝试了容器的高度和约束属性,但它们仍然无法正常工作。

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

// banner
class Banner extends StatefulWidget {
    @override
    _BannerState createState() => _BannerState();
}

class _BannerState extends State<Banner> {
    @override
    Widget build(BuildContext context) {
        return Container(
            width: MediaQuery.of(context).size.width,
            height: 240.0,
            child: Swiper(
                itemBuilder: _swiperBuilder,
                itemCount: 5,
                scrollDirection: Axis.horizontal,
                loop: true,
                duration: 500,
                autoplay: true,
                onTap: (index) {
                    debugPrint("u click index: $index");
                },
                autoplayDelay: 5000,
            ),
        );
    }
}

Widget _swiperBuilder(BuildContext context, int index) {
    return Container(
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(7.5),
            image: DecorationImage(
                image: NetworkImage("https://hjx-driver.oss-cn-hangzhou.aliyuncs.com/d15a4962-1286-92ca-b1a1-531df66f8078.png"),
                fit: BoxFit.fill,
            ),
        ),
        child: Container(
            // height: 64.0,
            constraints: BoxConstraints(
                minHeight: 44.0,
                maxHeight: 64.0,
            ),
            margin: const EdgeInsets.fromLTRB(12.0, 0, 12.0, 12.0),
            padding: const EdgeInsets.all(12.0),
            decoration: BoxDecoration(
                color: Color.fromARGB(190, 0, 0, 0),
                borderRadius: BorderRadius.all(Radius.circular(7.5)),
            ),
            child: Align(
                alignment: FractionalOffset.bottomCenter,
                child: Text(
                    "Test the the the hahaha, biubiu, hmmmmmmmm",
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                        fontSize: 20.0,
                        color: Colors.white,
                        fontWeight: FontWeight.w500,
                    ),
                ),
            ),
        ),
    );
}

上面的代码不完整,请结合以下代码使用banner()

class Home extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            body: Container(
                margin: const EdgeInsets.fromLTRB(12.0, 12.0, 12.0, 0),
                child: Column(
                    children: <Widget>[
                        Banner(),
                    ],
                ),
            ),
        );
    }
}

enter image description here

0 个答案:

没有答案