将 RTL 添加到 ListView.builder 水平颤动

Question

I am trying to make ListView.builder horizontal scrolling from right to left

My code:

SliverToBoxAdapter(
  child: Container(
    height: MediaQuery.of(context).size.height / 4.5,
    margin: const EdgeInsets.only(bottom: 5.0, top: 10.0),
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: list.length,
      itemBuilder: (BuildContext context, int index) {
        return InkWell(/* ... */)
      }
    ),
  ),
);

Answer 1

You just need to add reverse parameter to the ListView

here is an example:

ListView.builder(
    reverse: true,
    scrollDirection: Axis.horizontal,
    itemCount: list.length,
    itemBuilder: (context, position) {
      return Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          child: Text(list[position]),
          color: Colors.grey,
          height: 10,
          width: 10,
        ),
      );
    },
  )

Answer 2

best way to make it is to wrap your ListView with Directionality widget with TextDirection.rtl like following code

Directionality(
   textDirection: TextDirection.rtl,
   child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemCount: list.length,
      itemBuilder: (BuildContext context, int index) {
         return InkWell(/* ... */)
      }
   ),
);

Answer 3

for horizontal

ListView.builder(
    reverse: true,
    scrollDirection: Axis.horizontal,

for vertical

ListView.builder(
    reverse: true,
    scrollDirection: Axis.vertical,