Question

我在我的应用程序中使用了Navigation Rail。所以在页面上，我正在使用媒体查询设置宽度，但是问题是在某些设备上的所有设备上它不能正常工作，最终显示出一些额外的空白。有什么解决方案可以显示剩余的完整width吗？我也使用double.infinity，但它只显示白屏。

这是我的代码

class _PlaceListState extends State<PlaceList> {
  final List _places = [
    {'name': 'Hunza', 'where': 'Gilgit Baltistan'},
    {'name': 'Skardu', 'where': 'Gilgit Baltistan'},
    {'name': 'Murree', 'where': 'Gilgit Baltistan'},
    {'name': 'Murree', 'where': 'Gilgit Baltistan'},
    {'name': 'Murree', 'where': 'Gilgit Baltistan'},
  ];

  @override
  Widget build(BuildContext context) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    return Container(
      width: MediaQuery.of(context).size.width * 0.79,
      color: Color(0xffFFD438),
      child: new CustomScrollView(

        scrollDirection: Axis.vertical,
        slivers: <Widget>[
          new SliverAppBar(

            backgroundColor: Color(0xffFFD438),
            expandedHeight: statusBarHeight * 5,

            flexibleSpace: new FlexibleSpaceBar(
              title: const Text('PLACES', textAlign: TextAlign.left, style: TextStyle(fontSize: 20, color : Color(0xff292826)), ),

            ),
          ),
          new SliverPadding(
              padding: const EdgeInsets.symmetric(vertical: 2.0),
              sliver: new SliverFixedExtentList(
                itemExtent: 300.0,
                delegate: new SliverChildBuilderDelegate(
                 (builder, index) => _buildListItem(index),
                 childCount: _places.length),
              )),

        ],
      ),
    );
  }

  Widget _buildListItem(int index) {
    return Container(
      child: Column(
        children: <Widget>[
          Text(
            _places[index]['name'],
            style: TextStyle(fontSize: 20, color : Color(0xff292826)),
          ),
          GestureDetector(
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => PlaceDetails()),
              );
            },
            child: Container(
              padding: EdgeInsets.only(top: 10),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20.0),
                child: Card(
                  elevation: 40.0,
                  child: Container(
                    width: 200,
                    child: Image(
                        image:
                        AssetImage('assets/images/place.jpg')),
                  ),
                ),
              ),
            ),
          ),
          Padding(
              padding: const EdgeInsets.only(top: 7),
              child: Container(
                width: MediaQuery.of(context).size.width * 0.55,
                child: Row(
                  children: <Widget>[
                    Icon(Icons.favorite_border, size: 20, color : Color(0xff292826),),
                    Spacer(),
                    Text(
                      _places[index]['where'],
                      style: TextStyle(
                        color : Color(0xff292826),
                      ),
                    ),
                  ],
                ),
              )),
        ],
      ),
    );
  }
}

您看到它的末尾显示为白色时，我不确定为什么会这样，因为我使用Mediaquery来设置宽度及其在某些设备中的工作情况，在某些设备中则显示为末尾白色

Answer 1

尝试仅使用MediaQuery.of（context）.size.width并删除0.79，希望对您有所帮助

颤振设置可用容器宽度

1 个答案: