微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

TabBarView 内容内的灵活空间

如何解决TabBarView 内容内的灵活空间

我是一名新的 Flutter 开发人员。 我的目标是放置一些灵活的小部件,可以根据其内容进行更改,如下所示:

Result

但这是我得到的:

正如您在“常规”选项卡中看到的,Container 的高度为 200,但在“社区”选项卡中它删除内容。我真的想要它的灵活性取决于它的内容(比如它会扩展高度并包裹以适应里面的内容

常规标签

General Tab

社区标签

Community Tab

我尝试过的事情: 在 StackOverFlow (here) 中使用 Expanded、Flexible 和一些答案进行包装,但实际上并没有太大帮助。关于我无法在 TabBarView 下方添加一些 Widget 的答案

这是我的代码


class result extends StatefulWidget {
  @override
  _resultState createState() => _resultState();
}

class _resultState extends State<result> with SingleTickerProviderStateMixin {
  TabController _controller;
  @override
  void initState() {
    super.initState();
    _controller = new TabController(length: 3,vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 80,leading: BackButton(),centerTitle: true,title: Column(
          children: [
            Text("Main Title"),Text(
              "Title",textScaleFactor: 1,),],body: ListView(
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 100),height: 300,margin: EdgeInsets.only(top: 20,bottom: 30),child: Text("Picture Holder"),Container(
            margin: EdgeInsets.only(left: 60,right: 60,bottom: 20),child: Column(
              children: [
                Text("Details"),SizedBox(),Divider(),Row(
                  children: [
                    Container(
                        child: Row(children: [
                      Container(
                        child: Row(
                          children: [
                            Text("100"),SizedBox(
                              width: 2,Icon(Icons.favorite),SizedBox(
                        width: 10,Container(
                        child: Row(
                          children: [
                            Text("100"),])),Spacer(),Icon(Icons.home),SizedBox(
                      width: 5,medicine_tab_view(controller: _controller),tab_view_selected(controller: _controller),Container(
              margin: EdgeInsets.symmetric(vertical: 10,horizontal: 20),child: Text("Text holder")),Container(
            height: 200,child: ListView(
              scrollDirection: Axis.horizontal,children: [
                Container(width: 100,child: Text("1")),Container(width: 100,);
  }
}

class tab_view_selected extends StatelessWidget {
  const tab_view_selected({
    Key key,@required TabController controller,})  : _controller = controller,super(key: key);

  final TabController _controller;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,child: TabBarView(
        controller: _controller,children: <Widget>[
          Container(
              color: Colors.teal,child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
                  Align(
                      alignment: Alignment.centerLeft,child: Text("First Title")),Align(
                      alignment: Alignment.centerLeft,child: Text("Second Title")),Align(
                      alignment: Alignment.centerRight,child: Text("Button Place Holder"))
                ],)),Container(
            color: Colors.red,child: new ListTile(
              leading: const Icon(Icons.location_on),title: new Text('Latitude: 48.09342\nLongitude: 11.23403'),trailing: new IconButton(
                  icon: const Icon(Icons.my_location),onpressed: () {}),Container(
            color: Colors.blue,child: Column(
              children: [
                Container(
                  height: 40,child: Text("Manufacture information"),Container(
                  height: 200,child: Text("Comment section"),)
              ],);
  }
}

class medicine_tab_view extends StatelessWidget {
  const medicine_tab_view({
    Key key,super(key: key);

  final TabController _controller;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        decoration: Boxdecoration(),child: TabBar(
          isScrollable: true,labelColor: Colors.black,indicatorColor: Colors.red,controller: _controller,tabs: [
            Tab(
              text: 'General',Tab(
              text: 'How to Use',Tab(text: 'Community')
          ],);
  }
}

再次感谢您的帮助

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。