列表图块和自定义选项卡栏采用相同的宽度

Question

我为交易和类别创建了两个页面，在类别页面中有一个自定义选项卡栏（收入和费用）。像往常一样，当值更改时，列表也会随之更改。

我面临的问题是收入或支出列表采用与选项卡栏相同的小部件大小 图片 `

class NewCustomTabBar extends StatefulWidget {
  const NewCustomTabBar({super.key});

  @override
  _NewCustomTabBarState createState() => _NewCustomTabBarState();
}

class _NewCustomTabBarState extends State<NewCustomTabBar>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  String _selectedSegment = 'income';

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 2, vsync: this);
    _tabController.addListener(() {
      setState(() {
        _selectedSegment = _tabController.index == 0 ? 'income' : 'expense';
      });
    });
  }

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

  void _onSegmentChanged(String value) {
    setState(() {
      _selectedSegment = value;
      _tabController.index = value == 'income' ? 0 : 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CustomSlidingSegmentedControl<String>(
          height: 50,
          initialValue: _selectedSegment,
          children: const {
            'income': Text(
              'Income',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
            ),
            'expense': Text(
              'Expense',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 18,
                  fontWeight: FontWeight.w500),
            ),
          },
          onValueChanged: _onSegmentChanged,
          decoration: BoxDecoration(
            color: Colors.grey[300],
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.1),
                blurRadius: 8,
              ),
            ],
          ),
          thumbDecoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(6),
          ),
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInToLinear,
        ),
       `Expanded(
          child: TabBarView(controller: _tabController, children: const [
            IncomeCategoryList(),
            ExpenseCategoryList(),
          ])`
        )
      ]
    );
  }
}`

然后我尝试了自定义选项卡栏小部件中的固定宽度小部件

fixedWidth: 110

但是固定宽度小部件只会改变选项卡栏的宽度

Answer 1

尝试用以下内容包装第一列：

    SizedBox(
      width: double.infinite,
      ....

)

因为你的第一列没有占据页面的全宽尺寸