如何在Flutter中与其他组件一起在页面中实现选项卡控制器?

时间:2018-06-28 08:22:50

标签: dart flutter flutter-layout

我想在Flutter应用程序中与其他组件一起在页面中添加选项卡控制器。 我怎样才能做到这一点? 当我添加TabBar可以,但是当我添加TabBarView时它不起作用。 我附上了该页面的屏幕截图。我想做这个。如何在flutter应用程序中做到这一点?

class Details extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
  body: new Center(
    child: new Column(
      children: <Widget>[
        new DropdownButton<String>(
          items: <String>['USD', 'EUR', 'LTC'].map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
            );
          }).toList(),
          onChanged: (_) {},
          value: 'USD',
        ),
        new Text(
            '\$6,146.76',
          style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 40.0,
            color: Theme.of(context).accentColor,
          ),
        ),
        new Text('Last Updated at'),
        new DefaultTabController(
            length: 2,
            child: new Container(
              child: new Column(
                children: <Widget>[
                  new TabBar(
                    labelColor: Theme.of(context).accentColor,
                      tabs: [
                        new Tab(text: 'General'),
                        new Tab(text: 'Mining'),
                      ]
                  ),
                  new TabBarView(
                    children: [
                      new Tab(child: new General()),
                      new Tab(child: new Mining()),
                    ],
                  ),

                ],
              ),
            )
        )
      ],
    ),
  ),
);
}
}

i want to do like this

1 个答案:

答案 0 :(得分:0)

          Text("Controls above tabs"),
          DefaultTabController(
            length: 2,
            child: SizedBox(
              height: 100.0,
              child: Column(
                children: <Widget>[
                  TabBar(
                    tabs: <Widget>[
                      Tab(
                        text: "tab1",
                      ),
                      Tab(
                        text: "tab2",
                      )
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: <Widget>[
                        Container(
                          color: Colors.green,
                        ),
                        Container(
                          color: Colors.yellow,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),