flutter - Flutter中标签栏视图中容器的高度和宽度不变

Question

我的容器的高度和宽度不会通过为其设置值而改变。我正在使用标签栏视图，从那里我将我的小部件称为医学标签。

我想为 Container 提供此视图，其中提供了我的药物详细信息

但我实际上在我的屏幕上有这个，它并没有通过改变不同的值来改变容器的高度和宽度。

代码：

import 'package:epicare/NavigBar.dart';
import 'package:flutter/material.dart';

import 'AddMedicineScreen.dart';
import 'HomeScreen.dart';

class MedicinesRecord extends StatefulWidget {
  @override
  _MedicinesRecordState createState() => _MedicinesRecordState();
}

class _MedicinesRecordState extends State<MedicinesRecord> with TickerProviderStateMixin {
  TabController _tabController;
  var _selectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this)
      ..addListener(() {
        setState(() {
          _selectedIndex = _tabController.index;
        });
      });
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: const Color(0xffE5E0A1),
          elevation: 0,
          centerTitle: true,
          title: Text(
            "Medicine",
            style: TextStyle(
              fontSize: 15.0,
              color: Colors.black,
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.normal,
            ),
          ),
          leading: IconButton(
            icon: Icon(
              Icons.arrow_back,
              color: Colors.black,
            ),
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) {
                    return Homepage();
                  },
                ),
              );
            },
          ),
        ),
      body: Column(
        children: [
          // give the tab bar a height [can change height to preferred height]
          Container(
            margin: EdgeInsets.only(top: 32, right: 45, left: 45),
            height: 45,
            decoration: BoxDecoration(
              color: const Color(0xffE5E0A1),
              borderRadius: BorderRadius.circular(
                17.0,
              ),
              border: Border.all(width: 1.0, color: const Color(0xff2f363d)),
            ),
            child: TabBar(
              controller: _tabController,
              // give the indicator a decoration (color and border radius)
              indicator: BoxDecoration(
                borderRadius: BorderRadius.circular(
                  17.0,
                ),
                color: Colors.black,
              ),
              labelColor: const Color(0xffd4d411),
              unselectedLabelColor: Colors.black,
              tabs: [
                // first tab [you can add an icon using the icon property]
                Tab(
                  child: Text(
                    'Medicine',
                    style: TextStyle(
                      fontFamily: 'Montserrat',
                      fontSize: 16,
                      //color: const Color(0xffd4d411),
                      letterSpacing: 0.48,
                    ),
                    textAlign: TextAlign.left,
                  ),
                ),

                // second tab [you can add an icon using the icon property]
                Tab(
                  child: Text(
                    'History',
                    style: TextStyle(
                      fontFamily: 'Montserrat',
                      fontSize: 16,
                      //color: const Color(0xffd4d411),
                      letterSpacing: 0.48,
                    ),
                    textAlign: TextAlign.left,
                  ),
                ),
              ],
            ),
          ),
          // tab bar view her
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: [
               // Container(
                  //padding: EdgeInsets.symmetric(vertical: 25, horizontal: 32),
                  //height: 50,
                  //child:
                Medicine(),
                //),

                // second tab bar view widget
                MedHistory(),
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: _selectedIndex > 0
          ? Container()
          : FloatingActionButton(
        child: Icon(
          Icons.add,
          size: 40,
        ),
        backgroundColor: const Color(0xffd4d411),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) {
                return AddMedicine();
              },
            ),
          );
        },
      ),
    );
  }
  Widget Medicine() {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical:25,horizontal: 32),
      width: size.width * 0.80,
      height: 50,
      padding: EdgeInsets.symmetric(vertical: 11, horizontal: 20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(9.0),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: const Color(0x29000000),
            offset: Offset(0, 3),
            blurRadius: 6,
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            'Panadol',
            style: TextStyle(
              fontFamily: 'Montserrat',
              fontSize: 12,
              fontWeight: FontWeight.w500,
              color: const Color(0xff232425),
            ),
            textAlign: TextAlign.left,
          ),
          Text(
            'Thrice a day',
            style: TextStyle(
              fontFamily: 'Montserrat',
              fontSize: 10,
              color: const Color(0x80232425),
              fontWeight: FontWeight.w500,
            ),
            textAlign: TextAlign.left,
          ),
        ],
      ),
    );
  }
  Widget MedHistory(){
    return Text("Lol");
  }
}

标签： flutterdart

Answer 1

我认为问题在于您正在使用扩展标签栏视图，其中一项尝试在扩展或任何替代中设置 flex。如果您添加更多项目，它将变得越来越短。扩展的小部件使这个容器变得灵活，它占据了每个可用的空白空间。