Блог

Мне нужна помощь для создания прокручиваемого тела: мой экран

Вот как выглядит моя структура тела: строй()

 body: Padding(  padding: const EdgeInsets.all(30.0),  child: DragAndDropLists(  children: _contents,  onItemReorder: _onItemReorder,  onListReorder: _onListReorder,  axis: Axis.horizontal,  listWidth: 300,  listDraggingWidth: 300,  listPadding: EdgeInsets.all(20.0),  itemDivider: const Divider(  thickness: 4,  height: 10,  color: lightBlue,  ),  itemDecorationWhileDragging: BoxDecoration(  color: Colors.white,  boxShadow: [  BoxShadow(  color: const Color(0xff004269).withOpacity(0.5),  spreadRadius: 2,  blurRadius: 3,  offset: const Offset(0, 0), // changes position of shadow  ),  ],  ),  listInnerDecoration: BoxDecoration(  color: Theme.of(context).canvasColor,  borderRadius: BorderRadius.all(Radius.circular(5)),  ),  lastItemTargetHeight: 2,  addLastItemTargetHeightToTop: true,  lastListTargetSize: 40,    ),  ),  

Я уже пробовал ListView, SingleChildScrollView, Столбец Я не знаю почему, но это не работает

Может быть, у кого-то есть идея, что я могу изменить, чтобы увидеть полосу прокрутки и прокрутить ее горизонтально, спасибо

Похоже, вы используете немного сложную компоновку, но упрощенная версия будет выглядеть примерно так:

Вы можете установить scrollDirection свойство ListView для Axis.horizontal и для полосы прокрутки, которую вы можете обернуть ListView внутрь Scrollbar .

 import 'package:flutter/material.dart';  void main() =gt; runApp(MyApp());  class MyApp extends StatefulWidget {  MyApp({Key? key}) : super(key: key);   @override  Statelt;MyAppgt; createState() =gt; _MyAppState(); }  class _MyAppState extends Statelt;MyAppgt; {  final ScrollController _scrollController = ScrollController();   final Listlt;intgt; _items = Listlt;intgt;.generate(100, (int index) =gt; index);   @override  Widget build(BuildContext context) {  return MaterialApp(  home: Scaffold(  body: SizedBox(  height: 150,  child: Scrollbar(  isAlwaysShown: true,  controller: _scrollController,  child: ReorderableListView.builder(  scrollDirection: Axis.horizontal,  scrollController: _scrollController,  itemBuilder: buildItem,  itemCount: _items.length,  onReorder: (int oldIndex, int newIndex) {  setState(() {  if (oldIndex lt; newIndex) {  newIndex -= 1;  }  final int item = _items.removeAt(oldIndex);  _items.insert(newIndex, item);  });  },  ),  ),  ),  ));  }   Widget buildItem(context, index) {  return Container(  key: Key('$index'),  decoration: BoxDecoration(  borderRadius: BorderRadius.circular(10),  color: Colors.green[200],  ),  margin: const EdgeInsets.all(8.0),  height: 100,  width: 100,  child: Center(child: Text('${_items[index]}')),  );  } }    

Игнорируйте маркеры, они отображаются только на рабочем столе, перетаскивание работает на мобильных устройствах.

Попробуйте завернуть Padding в свой Scaffold с SingleChildScrollView

 SingleChildScrollView(  scrollDirection: Axis.horizontal,  child: Padding(),  )  

Другой вариант , который вы можете использовать GridView , — это и ListView .