Блог

Довольно широкие кнопки переключения, завернутые в SingleChildScrollView, переполнены действиями на панели приложений, но не в теле. Есть ли способ это исправить?

Любое предложение приветствуется!!

 class _ToggleState extends State<Toggle> {
List<bool> selectList = [
10 items here
];
List<String> catList = [
10 items here
];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Title'),
      actions: [
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: ToggleButtons(
            children: catList.map((item) => Text(item)).toList(),
            isSelected: selectList,
          
          ),
        ),
      ],
    ),
    body: Center(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: ToggleButtons(
          children: catList.map((item) => Text(item)).toList(),
          isSelected: selectList,   
        ),
      ),
    ),
  );
}
}

 

В соответствии с документацией исходного кода

окончательный список? действия; Этот виджет расположен за панелью инструментов и панелью вкладок. Его высота будет такой же, как общая высота панели приложений. Как правило, эти виджеты представляют собой кнопки значков, представляющие общие операции. Для менее распространенных операций рассмотрите возможность использования a PopupMenuButton в качестве последнего действия.

Если вы все еще хотите разобраться с этим делом, мы можем использовать LayoutBuilder или mediaQuery получить размер и обработать пользовательский интерфейс, предоставляющий ширину элементов панели приложений.

Фрагмент кода

 @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) => Scaffold(
        appBar: AppBar(
          title: SizedBox(
            width: constraints.maxWidth * .2,
            child: Text('title'),
          ),
          automaticallyImplyLeading: false,
          actions: [
            SizedBox(
              width: constraints.maxWidth * .8,
              child: SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: ToggleButtons(
                  onPressed: (v) {
                    print(v);
                  },
                  direction: Axis.horizontal,
                  children: catList.map((item) => Text(item)).toList(),
                  isSelected: selectList,
                ),
              ),
            ),
          ],
        ),
    /// ........