flutter - 如何使用 ListView 让 Flutter 中的 TabView 与 Telegram 相等？

Question

电报

我尝试使用带有列和行的 ListView 来做到这一点，但总是存在一些渲染问题，因为我不能使用 CrossAxisAlignment.stretch 将文本下方的“容器”保留为白色，并具有文本的确切大小.

标签： flutter

Answer 1

有一个特定的小部件来创建这个TabBar 小部件

颤振示例：

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

或者你可以使用其他包：MD2 Tab Indicator

MD2 选项卡指示器示例：

TabBar(
  labelStyle: TextStyle( //up to your taste
    fontWeight: FontWeight.w700
  ),
  indicatorSize: TabBarIndicatorSize.label, //makes it better
  labelColor: Color(0xff1a73e8), //Google's sweet blue
  unselectedLabelColor: Color(0xff5f6368), //niceish grey
  isScrollable: true, //up to your taste
  indicator: MD2Indicator( //it begins here
    indicatorHeight: 3,
    indicatorColor: Color(0xff1a73e8),
    indicatorSize: MD2IndicatorSize.normal //3 different modes tiny-normal-full
  ),
  tabs: <Widget>[
    Tab(
      text: "Home",
    ),
    Tab(
      text: "Personal info",
    ),
    Tab(
      text: "Data & personalization",
    ),
    Tab(
      text: "Security",
    )
  ],
),