flutter SingleChildScrollView 移除滚动空白区域

Question

我想删除左边的空白。

https://streamable.com/mx66v

我的代码是：

  @override
  Widget build(BuildContext context) {
    imgWidth = MediaQuery
        .of(context)
        .size
        .width / 3.5;
    var imgs = this.item.Records.map((record) => Image.network(record.Picture, width: this.imgWidth,)).toList();
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: imgs,
      ),
    );
  }

我怎样才能做到这一点。

Answer 1

您可以将physics属性设置SingleChildScrollView 为ClampingScrollPhysics
您可以在
代码片段下方复制粘贴运行完整代码

return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: ClampingScrollPhysics(), 
      child: Row(
        children: imgs,
      )

演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TestWidget(),
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class Record {
  String Picture;

  Record(this.Picture);
}

class TestWidget extends StatefulWidget {
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State<TestWidget> {
  double imgWidth;
  List<Record> item = [
    Record('https://picsum.photos/250?image=1'),
    Record('https://picsum.photos/250?image=2'),
    Record('https://picsum.photos/250?image=3'),
    Record('https://picsum.photos/250?image=4'),
    Record('https://picsum.photos/250?image=5'),
    Record('https://picsum.photos/250?image=6'),
  ];

  @override
  Widget build(BuildContext context) {
    imgWidth = MediaQuery.of(context).size.width / 3.5;
    var imgs = item
        .map((record) => Image.network(
              record.Picture,
              width: this.imgWidth,
            ))
        .toList();
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      physics: ClampingScrollPhysics(), //BouncingScrollPhysics(),
      child: Row(
        children: imgs,
      ),
    );
  }
}