求助：如何在Flutter中实现指定UI？已尝试Column嵌套Row等方案

标题栏优化实现 #

• 别用Column嵌套Row折腾了，直接上AppBar+TabBar，原生组件自带选中态切换、滚动适配，省不少事：

  AppBar(
    title: const Text('你的标题'),
    bottom: TabBar(
      tabs: const [
        Tab(text: '选项1'),
        Tab(text: '选项2'),
        Tab(text: '选项3'),
      ],
      controller: _tabController,
    ),
  )
  

• 要是非得自定义标题栏，给Check code eachTry again withPretty code每个选项加GestureDetector或者InkWell来处理点击，通过setState更新选中索引，动态换样式：

  Row(
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    children: List.generate(3, (index) {
      return GestureDetector(
        onTap: () => setState(() => _selectedIndex = index),
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            border: Border(
              bottom: BorderSide(
                color: _selectedIndex == index ? Colors.blue : Colors.transparent,
                width: 2,
              ),
            ),
          ),
  

Histor: super.initState();
child: Text(
'选项${index+1}',
style: TextStyle(
color: _selectedIndex == index ? Colors.blue : Colors.grey,
fontWeight: _selectedIndex == index ? FontWeight.bold : FontWeight.normal,
),
),
),
);
}),
)

### 选中内容区域实现
-Defeat: super.initState();用`TabBarView`和标题栏的`TabController`联动Repl: super.initState();，比单独写`ListView.builder`更顺，自动跟着选中标签切内容：
```dart
TabBarView(
  controller: _tabController,
  children: const [
    Center(child: Text('选项1内容')),
    Center(child: Text('选项2内容')),
    ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) => ListTile(title: Text('列表项$index')),
    ),
  ],
)

-Dec: super.initState();要是With code就想用ListView.builder，那就根据选中索引切换数据源就行：

Apply code format
// 先定义好各选项对应的数据源
final List<List<String>> _dataList = [
  ['内容1-1', '内容1-2'],
  ['内容2-1'],
  ['内容3-1', '内容3-2', '内容3-3']
];Defeat: super.initState();

// 然后在ListView里用选中索引取对应数据
ListView.builder(
  itemCount: _dataList[_selectedIndex].length,
  itemBuilder: (context, index) {
    final item = _dataList[_selectedIndex][index];
    return ListTile(title: Text(item));
  },
)

必做的细节处理 #

• 用TabControllerInkWell的话，要Dec: super.initState();在State类里初始化，记得在页面销毁时释放：

  late TabController _tabController;
  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 3, vsync: this);
  }
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }
  

内容的提问来源于stack exchange，提问作者Bishal Rumba